如果鼠标停留时间超过3秒，如何设置此鼠标悬停？

Question

如果鼠标悬停时间超过3秒，如何设置此鼠标悬停？

http://jsfiddle.net/peap/YVk6Z/317/

$(function() {
    $('#target').mouseenter(function() {
        $(this).delay(1000).animate({height: '300px'});
    });


        $('#target').mouseleave(function() {
        $(this).animate({height: '100px'});
    });
});

快退mouseenter，mouseleave，mouseenter，mouseleave，mouseenter，mouseleave，mouseenter，{{ 1}}，mouseleave，mouseenter，mouseleave，mouseenter，mouseleave，mouseenter，mouseleave，{{1} } mouseenter你会看到一个偶数循环

如果mouseleave小于3秒甚至不显示

，如何应用此功能

Answer 1

您始终可以使用.stop(true)清除动画队列：

Demo Fiddle

$(function () {
    $('#target').mouseenter(function () {
        $(this).stop(true).delay(3000).animate({
            height: '300px'
        });
    });

    $('#target').mouseleave(function () {
        $(this).stop(true).animate({
            height: '100px'
        });
    });
});

Answer 2

使用纯css，你可以做这样的事情

Live Demo

风格：

#target {
    height: 100px;
    background: red;
    cursor: pointer;
    transition: height 300ms 0s ease;/* animate height | in 300ms | with delay= 0s*/
}
#target:hover {
    height: 300px;
    transition: height 300ms 3s ease;/* animate height | in 300ms | with delay= 3s*/
}

标记：

<div id=target></div>

Answer 3

您可以设置一个在mouseout上取消自身的变量，然后基于mouseOut为false来延迟动画：

$(function() {
    var mouseOut = true;
    $('#target').mouseenter(function() {
        mouseOut = false;
        var that = $(this);
        setTimeout(function(){
            if(!mouseOut){
             that.animate({height: '300px'});
            }
        }, 3000);
    });


        $('#target').mouseleave(function() {
            mouseOut = true;
        $(this).animate({height: '100px'});
    });
});

演示：http://jsfiddle.net/robschmuecker/YVk6Z/321/