jQuery动画效果不符合预期
jQuery动画效果不符合预期
提问于 2017-07-09 08:14:46
由于某种原因，当我单击关闭图标时，它会像预期的那样将位置动画向下，但随后会自动恢复。
小提琴：https://jsfiddle.net/fq7na1zr/
如果您转到小提琴并单击橙色框，它将为其位置设置动画，并向您显示X以关闭它。
当您单击X时，它会再次向下动画div，但随后它会再次向上拍摄。
如何让div保持不变？
HTML：
<div data-position="down" id="container">
<div id="close" style="display: none;">X</div>
lorem ipsum dolor sit amet
</div>jQuery：
$('#container').click(function() {
var currentState = $(this).data('position');
if (currentState == "down") {
$('#container').animate({bottom: "20%"});
$('#container').attr('data-position','up');
$('#close').css('display','block');
}
});
$('#close').click(function() {
$('#container').animate({bottom: "-100%"});
$('#container').attr('data-position','down');
$('#close').css('display','none');
});回答 3
Stack Overflow用户
发布于 2017-07-09 08:22:09
之所以会发生这种情况，是因为当您单击X时，容器单击事件也会被触发，因为单击通过了，所以您首先会得到"X“单击事件上发生的任何事情，然后是.container单击事件中发生的任何事情，正如预期的那样，它将返回。您应该设置一些像"isDown“这样的标志，并在相关时将其设置为true或false，并在每个事件处理程序中使用它创建一个if条件，以避免这两个操作都发生。
Stack Overflow用户
发布于 2017-07-09 08:23:19
没有必要用JavaScript把它变得过于复杂。只需切换CSS类：
HTML
<div id="container">
<div id="close">X</div>
lorem ipsum dolor sit amet
</div>CSS
#container {
position: fixed;
bottom: 0%;
background-color: #f0ad4e;
color: #000;
padding: 10px 0;
font-size: 20px;
width: 100%;
cursor: pointer;
transition: all 0.5s ease-out;
}
#container.up {
bottom: 20%;
}
#container.down {
bottom: -100%;
}
#container.up #close {
display: block;
}
#close {
display: none;
}JS
var $container = $('#container')
var $close = $('#close')
$container.click(() => $container.addClass('up'))
$close.click(() => $container.addClass('down'))JSFiddle演示：
Stack Overflow用户
发布于 2017-07-09 08:30:34
event.stopPropagation();将会解决你的问题。因为您还单击了#close div和#container div。使用event.stopPropagation()；可以防止调用#container div的事件侦听器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44991863
复制相关文章
相似问题
腾讯云开发者
