Question

我正在使用简单的缩略图叠加脚本：

    // Hover thumbnail overlay
    $('li.carouselBlock a').hover( function () {
        // Display the overlay
        $(this).find('span.carousel-description').stop( false, true ).delay(500).animate( {'top':'0px'}, 500 ).show();
    },
    function () {
        // Hide the overlay
        $(this).find('span.carousel-description').stop( false, true ).animate( {'top':'-100px'}, 500 );
    });

我喜欢这样，如果用户将鼠标放在缩略图上（或实际关闭它），JS就不会启动，除非悬停已经持续了大约半秒钟。

最初我认为这可以通过jQuery的.delay()方法解决，就像我遇到的其他答案一样，但后来我发现这只会“延迟”动画（它总是即使用户浏览了它，也不要阻止它踢，除非用户在指定的时间内徘徊。

Answer 1

您在此处执行的操作是设置并重置计时器。这里的重要部分是在鼠标移出时重置计时器，以确保它不会在这种情况下触发。

var timer1
    // Hover thumbnail overlay
    $('li.carouselBlock a').hover( function () {
        // Display the overlay
        timer1= setTimeout(function(){ //set on mouse over
            $(this).find('span.carousel-description').stop( false, true ).animate(    {'top':'0px'}, 500 ).show();
            }
    },500),
    function () {
        // Hide the overlay
        clearTimeout(timer1) //reset on mouse out
        $(this).find('span.carousel-description').stop( false, true ).animate( {'top':'-100px'}, 500 );
    });

Answer 2

尝试使用javascripts的原生setTimeout：

var timeout;

// Hover thumbnail overlay
$('li.carouselBlock a').hover( function () {
    timeout = setTimeout(function() {
        $(this).find('span.carousel-description')
            .stop(false, true)
            .animate( {'top':'0px'}, 500 )
            .show();
    }, 500); // 500ms
},
function () {
    clearTimeout(timeout);
    $(this).find('span.carousel-description').stop( false, true ).animate( {'top':'-100px'}, 500 );
});

Answer 3

这似乎最容易使用jQuery hoverIntent插件解决：

http://cherne.net/brian/resources/jquery.hoverIntent.html

简单地用“hoverIntent”替换对jQuery的“悬停”方法的调用就可以了。

jQuery在悬停时延迟/禁用覆盖

3 个答案: