Simulando um mousestop() com jQuery – javascript
Post rápido, para deixar registrado o código
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript"> var move = false; var $box = null; jQuery(document).ready(function(){ $box = jQuery('.box').not('.active'); $box.mousemove(function( e ){ e.stopPropagation(); }); $box.mouseenter(function(){ var $this = jQuery( this ); $this.addClass('active'); }); $box.mouseleave(function(){ var $this = jQuery( this ); $this.removeClass('active'); }); jQuery(document).mousemove(function(){ $box = jQuery('.box').not('.active'); window.clearTimeout( stop ); $box.stop(true, true).fadeIn( 700 ); stop = window.setTimeout(function(){ mousestop(); }, 500 ); }); window.setTimeout(function(){ $box.fadeOut( 2000 ); }, 500); }); function mousestop(){ jQuery('.active').append('parou'); jQuery('.box').not('.active').stop(true, true).fadeOut( 2000 ); } </script> <style type="text/css"> .box { background: #f0f; width: 70px; height: 70px; float: left; margin: 20px; text-align: center; color: #fff; font: 14px/65px Tahoma, sans-serif; position: absolute; } #box1 { top: 30px; left: 0px; } #box2 { top: 70px; left: 150px; } #box3 { top: 150px; left: 20px; } #box4 { top: 0px; left: 220px; } #box5 { top: 150px; left: 300px; } </style> </head> <body> <div class="box" id="box1"> Box 1 </div><!-- /box --> <div class="box" id="box2"> Box 2 </div><!-- /box --> <div class="box" id="box3"> Box 3 </div><!-- /box --> <div class="box" id="box4"> Box 4 </div><!-- /box --> <div class="box" id="box5"> Box 5 </div><!-- /box --> </body> </html>
Dica: mecha o mouse, e deixe o mouse parado por um tempo.
Depois fique com o mouse sobre algum box, movimente dentro do box, e fique parado dentro dele.