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

Question

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

Answer 1

I prefer a slide left to right motion.

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

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