如何设置此鼠标悬停显示，即使鼠标悬停超过3秒

How to set this mouseover to show even when mouseover morethan 3 sec only?

本文关键字：悬停 鼠标 3秒 显示 何设置 设置      更新时间：2023-09-26

如何设置鼠标悬停超过3秒时显示

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

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

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

当您在mouseenter7上禁食CC_1, mouseleave, mouseenter, mouseleave, mouseenter, mouseleave, mouseenter, mouseleave, mouseenter, mouseleave, mouseenter, mouseleave, mouseenter, mouseleave, mouseenter, mouseleave时，您将看到一个偶数循环

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

你总是可以使用.stop(true)来清除动画队列:

演示小提琴

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

对于纯css，你可以这样做

<标题>现场演示h1> 风格: 
#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>

你可以设置一个变量，在鼠标退出时自动取消，然后基于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/

相关文章：