模式关闭时重置动画 Jquery

Question

我的购物车图标在中间。但是我该如何重新设置位置。所以当我关闭 Modal 时，我希望它再次位于中间。 $("#addedToCartModal").on('hide.bs.modal', function () {

$(document).ready ( function () {
$("#addedToCartModal").on("shown.bs.modal", function(){
      $('.modal-backdrop').css('opacity', '.91');

                setTimeout(function () {
                function animate() {
                    $(".cart-after-item-added").animate({"margin-left":"105%"}, 2000, 'linear',function(){
                            $('.cart-after-item-added').css({"margin-left":"-133%"});
                            $(".cart-after-item-added").animate({"margin-left":"50%"}, 4000, 'linear',function(){
                            animate();
                    });
              });
            }
                animate();
                }, 250);
        });
        $("#addedToCartModal").on('hide.bs.modal', function () {
// ANIMATION STOPS BUT HOW TO RESET?
    $('#addedToCartModal').stop();
});
});

Answer 1

编辑以提供您的特定用例

$(document).ready ( function () {

$("#addedToCartModal").on("shown.bs.modal", setActive(true) );
    $("#addedToCartModal").on('hide.bs.modal', setActive(false) );
function setActive(show) {
    (show == true) ? $('#addedToCartModal').addClass("active") : $('#addedToCartModal').removeClass("active);
}

});

是的。您使用 css classes 存储状态，其中默认状态是实际项目的 class，修改后的状态是 class 即 added/removed在某些事件中（在我的 fiddle 中，它是一次点击）。然后使用 CSS 您可以在两者之间设置动画。下面的 fiddle 将说明我的意思。让我知道是否可以更具体。 :)

var btn = document.getElementById("toggle");
var sample = document.getElementById("sample");

function toggle() {
  (sample.classList.contains("active")) ? sample.classList.remove("active") : sample.classList.add("active");
}

.sample {
  height: 200px;
  width: 200px;
  background-color: #999999;
  transition: all 300ms ease-in-out;
}

.sample.active {
  background-color: #333333;
  transform: translateX(50%);
}

<div class="container">
  <div id="sample" class="sample"></div>
</div>
<button id="toggle" onClick="toggle()">Toggle</button>

模式关闭时重置动画 Jquery

Reset animation Jquery when modal closes

jquery

jquery-animate