模态关闭时重设动画Jquery。

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

解决方案:

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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

Apollo GraphQL服务器:通过单独解析的字段进行过滤(或排序)。

2022-9-8 12:28:25

未分类

如何在.adoc文件中把一个标题跨过多行?

2022-9-8 12:28:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索