The jQuery API method of .mouseup()  allows you to make things happen when the visitor releases the button on the mouse. It is often paried with the .mousedown() method and the .mouseup() stops the current action.

These two methods are often used with a function() and then a series of actions, similar to the .click() method.

 

Here is an example of the jQuery .mousedown() and .mouseup() methods:

$("#moveRight").mousedown(function(){
    $("#ballgreen").animate({left: "+=400px"}, 6000);
});
$("#moveRight").mouseup(function(){
    $("#ballgreen").stop();
});

$("#moveLeft").mousedown(function(){
    $("#ballgreen").animate({left: "-=400px"}, 6000);
});
$("#moveLeft").mouseup(function(){
    $("#ballgreen").stop();
});

$("#moveUp").mousedown(function(){
    $("#ballgreen").animate({top: "-=400px"}, 6000);
});
$("#moveUp").mouseup(function(){
    $("#ballgreen").stop();
});

$("#moveDown").mousedown(function(){
    $("#ballgreen").animate({top: "+=400px"}, 6000);
});
$("#moveDown").mouseup(function(){
    $("#ballgreen").stop();
});

Here is the HTML for this example:

<div id="ballBox">
    <div id="ballgreen"></div>
</div>
<button id="moveUp">UP</button>
<button id="moveRight">RIGHT</button>
<button id="moveLeft">LEFT</button>
<button id="moveDown">DOWN</button>

Here is the result: