模态关闭时重设动画Jquery。

Question

我的购物车图标在中间。但我怎样才能重新设置位置。所以当我关闭模式时，我想让它再次处于中间位置。$("#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

EDIT给你特定的使用情况

$(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类来存储状态，其中默认状态是实际物品的类，而修改状态是在某个事件中添加和删除的类（在我的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>