隐藏 3 列并将其中一列扩展为 100% 行时的 jQuery 过渡效果

jQuery transition effect when hiding 3 columns and expanding one to be 100% of row

本文关键字：100% 扩展 过渡效果 jQuery 一列 隐藏      更新时间：2023-09-26
我的页面最初有 4 个包装器div，每个包装器div 都有一个"col-md-3"

类，但在单击展开按钮后，其中 3 个包装器被隐藏，点击的包装器得到"col-md-12"：

// If wrapper is the current wrapper expand to col-md-12 otherwise hide
    $(".wrapper").each(function (index) {
        if ($(this).attr("id") === wrapper.attr("id")) {
            $(this).removeClass("col-md-3").addClass("col-md-12");
        } else {
            $(this).hide();
        }
    });

有没有快速/简单的方法来制作这样的动画？我不喜欢将jQuery UI库添加到我的项目中。我更喜欢从左到右的滑动运动。

到目前为止，我唯一能想到的就是做：

$(this).hide('1000');

但是，我更喜欢在添加类"col-md-12"时制作动画，而不是隐藏其他类。

我更喜欢从左到右的滑动运动。

在 JQuery 中，您可以使用

$(this).stop().animate({
    right: '-50%'         //distance of moving
}, 400);                 //time of moving in ms
相关文章：