Question

出于某些原因，当我点击关闭图标时，它会按预期动画下来的位置，但随后会自动恢复。

如果你去小提琴并单击橙色框，它将为其位置设置动画，并显示一个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');
        });

Answer 1

这种情况正在发生，因为当您单击X时，容器点击事件也会因为点击进行而被触发，因此您首先获得“X”点击事件中发生的任何事件，然后点击.container中发生的任何事情事件，正如预期的那样，重新开始。你应该制作一些像“isDown”这样的标志，并在相关时将其设置为true或false，并在每个事件处理程序中使用if条件，以避免两个动作都发生。

Answer 2

无需使用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演示：https://jsfiddle.net/fq7na1zr/3/

Answer 3

 event.stopPropagation();

将解决您的问题。因为你也点击#close div和#container div。使用event.stopPropagation（）;你阻止调用#container div的事件监听器。

jQuery Animate不按预期运行

3 个答案: