Main Tutorials

jQuery mouseup() and mousedown() example

Both jQuery mouseup() and mousedown() events are self-explanatory, to verify the mouse button is pressed or released.

Try it yourself


<html>
<head>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	#mouseup, #mousedown{
		float:left;
		padding:8px;
		margin:8px;
		border:1px solid red;
		width:200px;
		height:150px;
		background-color:#999999;
	}
	
</style>

</head>

<body>

<h1>jQuery mouseup() and mousedown() examples</h1>

<div id="mouseup">
	<h2>mouseup</h2>
	 Fire when mouse over this element and released the mouse button.
</div>

<div id="mousedown">
	<h2>mousedown</h2>
	Fire when mouse over this element and pressed on the mouse button.
</div>

<script type="text/javascript">
		
$('#mouseup').mouseup(function(){
	$('#mouseup').slideUp();
});

$('#mousedown').mousedown(function(){
	$('#mousedown').fadeOut();
});

</script>

</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
2 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
rinj
13 years ago

can you help?

what the problem in this code..

when first click the button.. the image can’t appear

but after 3x click the image mousedown it is ok

thank!. sorry for may bad english