jQuery 动画无法在悬停时工作

Question

把我的头发拉出来，看起来很简单，但无论出于何种原因都行不通。

当您使用 jquery 将鼠标悬停在父元素上时，我正在尝试为元素中的 div 容器设置动画。

想法是，当您将鼠标悬停在父级上时，子级 div 会向下滑动，而当您将鼠标悬停在父级上时，它会移回原来的位置。

这是我的 html 标记:

<article class="skizzar_masonry_entry " style="position: absolute; left: 0px; top: 0px;">

<a class="skizzar_ma_fancybox clickable" href="http://www.skizzar.com/paulthefunkydrummer/files/2015/01/paul_jones_drummer_gallery_16-683x1024.jpg">
    <i class="skizzar_ma_overlay fa fa-search" style="top: 0px;"></i>
    <img alt="Paul Jones" src="http://www.skizzar.com/paulthefunkydrummer/files/2015/01/paul_jones_drummer_gallery_16-683x1024.jpg"></img>
</a>

</article>

和我的 jQuery:

$(".skizzar_masonry_entry").hover(function(){
$('.skizzar_ma_overlay', this).animate({'top': '100px'}, 400, 'easeOutExpo');
}, function(){
$('.skizzar_ma_overlay', this).animate({'top': '0'}, 400, 'easeOutExpo');
}); 

这是一个展示我工作的 jsfiddle: http://jsfiddle.net/h3sqe9re/

Answer 1

您需要为自定义转换包含 jQuery-UI。 easeOutExpo 未包含在 jQuery 核心库中。

working demo

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.