Сбросить анимацию Jquery, когда модальное закрытие - PullRequest
Новая
       28

Сбросить анимацию Jquery, когда модальное закрытие

0 голосов
/ 24 апреля 2020

Значок моей корзины находится посередине. Но как мне снова сбросить позицию? Поэтому, когда я закрываю Модал, я хочу, чтобы он снова оказался посередине. $("#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();
});
});

1 Ответ

1 голос
/ 24 апреля 2020

РЕДАКТИРОВАТЬ, чтобы указать конкретный вариант использования 

$(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 классами, где состояние по умолчанию - это класс реального элемента, а измененное состояние - это класс, который добавляется / удаляется для какого-то события (в моей скрипке это щелчок). Затем с CSS вы можете анимировать между двумя. Скрипка ниже иллюстрирует мой смысл. Дайте мне знать, если я могу быть более конкретным c. :) 

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>
...