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

缓和

.animate() 的剩余参数是一个字符串，用于命名要使用的缓动函数。缓动函数指定动画在动画中不同点的进展速度。 jQuery 库中唯一的缓动实现是默认的，称为摇摆，以及以恒定速度进行的一种，称为线性。使用插件可以使用更多的缓动功能，尤其是jQuery UI suite。

Answer 2

如果您检查您的控制台，您将在jQuery.easing[ this.easing ]() 看到undefined is not a function 的错误。

基本上，您定义的缓动方法easeOutExpo 在核心 jQuery 库中不可用 - 它是 jQuery UI 的一部分。

将 jQuery UI (https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js) 添加到您的小提琴中即可完成这项工作

Updated Fiddle

Answer 3

根本不需要js。我用css做悬停效果。

为 hidden div 设置固定高度，然后移除该高度，同时将鼠标悬停在 div 的最顶部。 （即悬停在整个 div 上）。

http://jsfiddle.net/simeon1929/h3sqe9re/14/