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">
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="6894224149"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script><h2>mouseup</h2>
	 Fire when mouse over this element and released the mouse button.
</div>

<div id="mousedown">
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-2836379775501347"
     data-ad-slot="8821506761"
     data-ad-format="auto"
     data-ad-region="mkyongregion"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script><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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
trackback
jQuery Tutorial

[…] and mouseleave() Example to show the different between mouseout() and mouseleave() in jQuery. Different between mouseup() and mousedown() Example to show the different between mouseup() and mousedown() in jQuery.jQuery Keyboard […]

rinj
Guest
rinj

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