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库中唯一的缓动实现是默认的，称为swing，以及一个以恒定速度进行的实现，称为线性。使用插件可以使用更多的缓动功能，最值得注意的是jQuery UI suite。

Answer 2

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

基本上，您定义的缓动方法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来制作悬停效果。

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

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

jQuery动画不在悬停上工作

3 个答案: