Question

我的卡片布局如下所示：https://image.prntscr.com/image/AOyf0PwmQDWtJwqf_r4ckA.png

在这段代码的帮助下，当我按“显示详细信息”时我会扩展卡片，但我似乎无法更改动画运行的时间或将完成的功能同步到实际完成时。它触发了高度动画发生的中途。我做错了什么？

这是jquery代码：

$(document).ready(function () {
                    var block;
                    var pTag;
                    $(".showFullCard").click(function () {
                        block = $(this).parents(".roadmap-block");
                        $(this).toggle(function () {
                            $(block).animate({
                                height: "400px"
                            }, 200);
                            $(block).css({ "position": "relative", "z-index": "1" })
                        }, function () {
                            $(block).animate({
                                height: "700px"
                            }, 200);
                            $(block).css({ "position": "absolute", "z-index": "2" })
                        });
                    });
                    $(document).click(function (event) {
                        if (!$(event.target).closest(block).length) {
                            $(block).animate({
                                height: "400px"
                            }, 200, function(){
                                $(block).css({ "position": "relative", "z-index": "1" })
                            });

                        }
                    });
                });

Answer 1

请添加HTML标记，以便我们测试代码。

可能更容易的一个选项是创建一个带有转换的CSS类，并使用以下方法切换该类：

$(document).ready(function(){
   $("showFullCard").click(function(){
      $(this).toggleClass('yourClass');
   });
});

CSS：

.yourClass {

height:600px!important;
width:200px;
padding 100px;
transition:  all .5s ease;

}
.roadmap-block{

width:400px;
height:400px;
background:#ccc;
padding:20px;
transition: all .3s ease;

}

Jquery动画完成会触发中途动画

1 个答案: