How to trigger an event when counter has some value?

Simply - I can't find an answer to this specific question and my jquery/js experience is still to low to figure it out.

I have this in my code:

$(function() {
    $( "#progressbar" ).progressbar({
        valu开发者_开发问答e: 0
    });

    $( "#draggable" ).draggable({
        drag: function() {
            var val = $("#progressbar").progressbar("option", "value");
            $("#progressbar").progressbar("option", "value", val+0.4);

        },
    });
});
</script>

<div id="progressbar"></div>
<br/>
<div id="draggable" class="ui-widget ui-widget-content">
    <p>Drag me arround like a mad man.</p>
</div>

When user drags the element arround, the progress bar gets filled. What I'm looking for is an event, when the progress bar gets filled (the value gets to 100). To be specific, I'd like a paragraph to show beneath the progress bar, but that's optional.

I was looking for a js if/else statement, but I could not figure out, how to set it as a trigger.

Any help (direct, or as a link to resources) will be nicely viewed.

You can use the complete event of the progressbar API (see the documentation):

$( "#progressbar" ).progressbar({
   complete: function(event, ui) { ... }
});

[EDIT] Your full code would be (with adding a paragraph after the progressbar as you asked):

$(function() {
    $( "#progressbar" ).progressbar({
        value: 0
        complete: function(event, ui) { 
           $('<p>The progressbar is complete</p>').insertAfter('#progressbar'); 
        }
    });

    $( "#draggable" ).draggable({
        drag: function() {
            var val = $("#progressbar").progressbar("option", "value");
            $("#progressbar").progressbar("option", "value", val+0.4);
        },
    });
});
</script>

see complete event of the progressbar:

 $( "#progressbar" ).progressbar({
    value: 0,
    complete: function(event, ui) 
    {
        // here is the event that you are looking for... 
    }
});

According to the documentation you can either supply a method in the progressbar initialisation method or subscribe to the progressbarcomplete event.

So, changing your code to something like:

$( "#progressbar" ).progressbar({
    value: 10,
    complete: function(){ alert("complete"); }
});

illustrates one of these usages.

Live example of showing a div on complete: http://jsfiddle.net/CCGxW/