JSFiddle - React, Tailwind, and code Playground

jquery stop解释

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()));
        });
    });
});