隐藏 3 列并将 1 列扩展为 100% 行时的 jQuery 过渡效果答案

【问题标题】：jQuery transition effect when hiding 3 columns and expanding one to be 100% of row隐藏 3 列并将 1 列扩展为 100% 行时的 jQuery 过渡效果
【发布时间】：2016-03-03 22:43:42
【问题描述】：

我的页面最初以 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”类而不是隐藏其他类时制作动画。

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

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

在 JQuery 中，您可以使用动画元素

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

【讨论】：

这看起来不错，但你能告诉我在添加类 col-md-12 时如何做到这一点吗？我知道在 jQuery UI 中我可以简单地执行 .addClass("col-md-12", 1000)。我刚刚尝试了您的示例，我的元素从页面上滑出，但幻灯片效果非常完美。
还可以查看文档：http://api.jquery.com/animate/。参考这个post，只有使用 JQueryUI 库才能为添加的 CSS 类设置动画