JSFiddle - React, Tailwind, and code Playground

jquery stop解释

by weiming le

HTML

<a href="#" class="btn">hover me</a>
<div class="dropdown">
    <ul>
        <li>lalalal1</li>
        <li>lalalal3</li>
        <li>lalalal2</li>
    </ul>
</div>

CSS

* { margin:0; padding: 0; }
body { font:12px/1.5 arial; margin: 40px; }
.btn { display: block; border: 1px solid orange; background: #eee; color: #666; width: 10em; height: 24px; line-height: 24px; text-align: center; text-decoration: none; }
.dropdown { display: none; }
.dropdown ul { list-style: none; background: #eee; width: 200px; border: 10px solid orange; margin-top: 2px; }
.dropdown ul li { line-height: 2; }

JavaScript

$(function(){

    var i=0,j=0;

    function getHourTime(datetime){
        var time={
            hours:datetime.getHours(),
            seconds:datetime.getSeconds(),
            miliseconds:datetime.getMilliseconds()
        }
        return time.hours+':'+time.seconds+':'+time.miliseconds;
    }
    $('.btn').hover(function(){
        $('.dropdown').stop(false,false).slideDown(4000,function(){
            i++;
            console.log('mouseEnter:'+i+', time is:'+getHourTime(new Date()));
        });
    },function(){
        $('.dropdown').stop(false,false).slideUp(4000,function(){
            j++;
            console.log('mouseout....'+j+', time is:'+getHourTime(new Date()));
        });
    });
});