Jquery 然后悬停。单击以设置问题的动画
更新:我已合并代码并尝试添加if/else语句。我还没有弄清楚如何点击忽略mouseenter/mouseleave函数Jquery 然后悬停。单击以设置问题的动画,jquery,click,hover,if-statement,Jquery,Click,Hover,If Statement,更新:我已合并代码并尝试添加if/else语句。我还没有弄清楚如何点击忽略mouseenter/mouseleave函数 $('#storybtn').on({ mouseenter:function(){ $('#story') .stop() .animate({top:'405px'},'slow'); }, mouseleave:function(){ $('#story') .stop() .animate
$('#storybtn').on({
mouseenter:function(){
$('#story')
.stop()
.animate({top:'405px'},'slow');
},
mouseleave:function(){
$('#story')
.stop()
.animate({top:'435px'},'slow');
},
click:function(){
var position = $('#story').css('top');
if (position>'10px'){
$('#story')
.stop()
.animate({top:'10px'},'slow');
}
else (position='10px'){
$('#story')
.stop()
.animate({top:'435px'},'slow');
}
}
});
首先,较新版本的jQuery不推荐使用
.hover()
的语法。第二,您需要在激活新动画之前停止其他动画,否则它只会将其排队,直到上一个动画完成。试试这个:
$('#storybtn').on({
mouseenter:function(){
$('#story')
.stop()
.animate({top:'405px'},'slow');
},
mouseleave:function(){
$('#story')
.stop()
.animate({top:'435px'},'slow');
},
click:function(){
$('#story')
.stop()
.animate({top:'10px'},'slow');
}
});
这利用了处理程序,这就是
。click()
和。hover()
的缩写。通过使用真实的东西,您可以整合您的代码。我为您创建了一个提琴示例:
为了避免单击后出现鼠标移动动画,我在#故事中添加了一个类click,并添加了一个if/else案例来检查它或在鼠标移动后删除它:
$('#storybtn').on({
mouseenter: function () {
$('#story')
.stop()
.animate({top: '405px'}, 'slow');
},
mouseleave: function () {
if (!$('#story').hasClass('clicked')) {
$('#story')
.stop()
.animate({top: '435px'}, 'slow');
} else {
$('#story').removeClass('clicked')
}
},
click: function () {
var position = $('#story').css('top');
if (position > '10px') {
$('#story')
.addClass('clicked')
.stop()
.animate({top: '10px'}, 'slow');
} else if (position === '10px') {
$('#story')
.addClass('clicked')
.stop()
.animate({top: '435px'}, 'slow');
}
}
});
on工作得更好,但当我单击鼠标时,鼠标落在后面并破坏了div平面,它会自动回滚。