JQuery Animate - 如何将动画应用于悬停在其上的图像而不是同一类的所有图像？
这是我的 jQuery 代码：
$(document).ready(function() {
$(".bottommrg").mouseenter(function() {
$(".bottommrg").animate({
marginTop: '-20px'
}, {
duration: 500,
easing: 'easeOutCubic',
complete: function() {
$(this).animate({
marginTop: '0px'
}, {
duration: 500,
easing: 'easeInCubic'
});
$(this).animate({
marginTop: '-10px'
}, {
duration: 300,
easing: 'easeInCubic'
});
$(this).animate({
marginTop: '0px'
}, {
duration: 300,
easing: 'easeInCubic'
});
}
});
}).mouseleave(function() {
$("img", this).stop().css({
marginTop: '0px'
});
});
});
这是一个示例图像：
<img src="images/car-park.png" class="alignleft bottommrg" alt=""/>
我创建了一个小提琴，但由于某种原因它无法工作： http://jsfiddle.net/FGpCP/7/
无论如何，我的动画有效，但是当您将鼠标悬停在同一类的任何图像上时，当我只想要当前悬停在其上的图像时，它们都会动画化动画。
我意识到您可以使用 id 标记来执行此操作，但随后我会设置相同的代码 6 次。
另外，我想做的是一种反弹效果，还可以，但并不完美，如果有人有任何建议让它看起来更好，我会非常感激。
我知道有一个弹跳插件，但我宁愿以这种方式实现它。
谢谢。
This is my jQuery code:
$(document).ready(function() {
$(".bottommrg").mouseenter(function() {
$(".bottommrg").animate({
marginTop: '-20px'
}, {
duration: 500,
easing: 'easeOutCubic',
complete: function() {
$(this).animate({
marginTop: '0px'
}, {
duration: 500,
easing: 'easeInCubic'
});
$(this).animate({
marginTop: '-10px'
}, {
duration: 300,
easing: 'easeInCubic'
});
$(this).animate({
marginTop: '0px'
}, {
duration: 300,
easing: 'easeInCubic'
});
}
});
}).mouseleave(function() {
$("img", this).stop().css({
marginTop: '0px'
});
});
});
and this is an example image:
<img src="images/car-park.png" class="alignleft bottommrg" alt=""/>
I created a fiddle but for some reason it won't work: http://jsfiddle.net/FGpCP/7/
Anyway, my animation works but when you hover on any image of the same class, they ALL animate when I only want the one that is currently being hovered over to animate.
I realise you could do this using the id tag but then I would have the same code set up 6 times.
Also, what I was trying to do was a sort of bounce effect, it's ok but not perfect, if anyone has any suggestions to make it look better than I would really appreciate them.
I know there is a bounce plugin but I would rather achieve it this way.
Thanks.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
更改鼠标输入时动画功能的设置方式应该是
这有意义吗
Change the way the animate function is setup on mouse enter it should be
Does that make sense
您是否在某个时刻嵌入了您尝试使用的缓动类型（easeInCubic）？根据： http://api.jquery.com/animate/ 唯一的“out-of- the-box”值应该是“摆动”和“线性”。 （我的 JS 控制台说：
Object #请参阅：http://jsfiddle.net/frederikring/BHSxQ/ 工作
Are you embedding the type of easing you are trying to use (easeInCubic) at some point? According to: http://api.jquery.com/animate/ the only "out-of-the-box" values should be "swing" and "linear". (My JS-console says:
Object #<Object> has no method 'easeOutCubic'as well so I guess that might be the problem).See: http://jsfiddle.net/frederikring/BHSxQ/ working
我自己没有尝试过，但你可以看看这是否有效`$(document).ready(function() {
});`
我将类的第二个调用更改为这个，这样它将在特定的元素，试试这个告诉我它是否有效，我可以进一步帮助你
I didn't try this my self but you can see if this works`$(document).ready(function() {
});`
I changed the second call of the class to this, this way it will execute on the specific element, try this tell me if it works, I can help you further