DEMO

Question

我发现这个非常酷的悬停动画。它位于以下网站：http://preview.nestolab.com/?theme=Kadalas

点击任意选项以加载演示网站，然后向下滚动到“Kadalas投资组合”＆＃39;节...

我试图按如下方式复制它，但它似乎并不那么平滑，特别是如果动画正在进行中并且你鼠标输出然后鼠标回来，似乎所有定时事件都被扰乱了。我想要做的是基本上中止所有定时事件，当我鼠标移出一个对象或当我快速鼠标悬停多个对象时（我想防止多个动画同时执行）。现在发生的事情是，如果我在500毫秒内将对象悬停3次，它会连续三次触发动画。我想它只能触发一次。

$('.z_project_container').hover(function(){
    $(this).children('.z_project_title').fadeIn(200).animate({
        bottom: "250px"
    }, 650);
});
$('.z_project_container').mouseout(function(){
    $(this).children('.z_project_title').animate({
        bottom: "0px"
    }, 100);
    $(this).children('.z_project_title').fadeOut(150);
});

的jsfiddle： http://jsfiddle.net/x3xay12L/3/

我很欣赏有关如何使这个动画更流畅的任何建议。

提前致谢！

Answer 1

更改活动

首先，我会将活动从hover更改为mouseEnter和mouseout更改为mouseLeave

$('.image-protfolio').mouseenter(function () {
    $(this).find('.image-protfolio-shader').stop(true, false).fadeIn(200);
    $(this).find('.image-protfolio-text').stop(true, false).animate({'top': '42%', 'display': 'block'}, 200);
});

$('.image-protfolio').mouseleave(function () {
    $(this).find('.image-protfolio-shader').stop(true, false).fadeOut(200);
    $(this).find('.image-protfolio-text').stop(true, false).slideDown(300);
    $(this).find('.image-protfolio-text').stop(true, false).animate({'top': '100%', 'display': 'block'}, 200);
});

使用＆＃39;停止＆＃39;功能

我在动画进行过程中用来实现平滑的另一件事是来自jQuery的stop函数，当这样调用时：stop(true, false)确保清除动画队列（第一个参数），并且元素将保持在其位置并且不会完成最后一个动画。

您可以在此处阅读此功能： jQuery 'stop' function

当然是小提琴：

DEMO

Answer 2

最简单的解决方法是使用stop(true,true)。这将停止当前动画，并使用2个参数true将其从动画队列中删除并将当前动画跳转到它结束。

$('.z_project_container').hover(function(){
    $(this).children('.z_project_title').stop(true,true).fadeIn(200).animate({
        bottom: "250px"
    }, 650);
});

的 DEMO

在mouseout上隐藏与show冲突

2 个答案:

更改活动

使用＆＃39;停止＆＃39;功能

DEMO