我有一个 div 可以从另一个 div 的顶部到底部进行动画处理。我目前正在使用 mouseenter/leave 和 JS 动画(其原始状态为 up/top)进行缓动。我想悬停/鼠标进入并让它向下移动,如果我鼠标离开/悬停关闭则保持向下。当我再次悬停时,它将动画回到顶部/开始。
我最初使用 mouseenter/leave ,这显然不能满足我的需要,因为我希望在 mouseleave 时状态保持不变。那么什么功能最适合这种需求呢?我仍在学习术语,并且在如何更好地表达问题上遇到了困难。
代码:
function init() {
mouseenter: function(){
$(".ltrP").stop(true, true).animate({
marginTop:"170px"
},
{
duration: 1000,
easing: "easeOutBounce"
});
},
mouseleave: function(){
$(".ltrP").stop(true, true).animate({
marginTop: "0px"
},
{
duration: 1000,
easing: "easeInBounce"
});
}
});
}
window.onload = init;
最佳答案
我已经编辑了你的代码,请参阅注释以获取解释:
$(document).ready(function(){ // Runs when document is loaded
$(".ltrP").mouseenter(function(){ // Mouseenter event on the given object (.ltrP)
var goTo = $(this).css("marginTop") == '0px' ? 170 : 0; // When the current margin-top is 0px animate to 170px, otherwise animate it back to 0px
$(this).stop(true,false).animate({ // Changed the stop(true, true) to stop(true, false), looks nicer in my opinion
marginTop: goTo // Animate to the just set variable
}, 1000);
});
});
这里有一个演示:http://jsfiddle.net/hnDmt/
(缓动“easeInBounce”对我不起作用,所以我删除了它。(也许是 jQuery UI 缓动?))
关于javascript - 多个悬停实例 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11445236/