网格/列表视图之间的淡入和淡出过渡如何？

debugcn 发表于 Dev

里汉

这用于在网格视图和列表视图之间切换以显示内容。如何在网格和列表视图之间切换时添加淡入和淡出过渡或不透明度。

这是Fiddle：（http://jsfiddle.net/9B4Lp/3/演示，无过渡）

来自Fiddle的JS：

jQuery(document).ready(function () {
    var $box=jQuery(".post"),
        $bar=jQuery("a.bar_view");
    $dat=jQuery("a.dat_view");
    $dat.click(function () {
        $box.removeClass("bar");
        jQuery(this).addClass("active");
        $bar.removeClass("active");
        jQuery.cookie("dat_style", 0);
        return false
    });
    $bar.click(function () {
        $box.addClass("bar");
        jQuery(this).addClass("active");
        $dat.removeClass("active");
        jQuery.cookie("dat_style", 1);
        return false
    });
    if(jQuery.cookie("dat_style")==0) {
        $box.removeClass( "bar");
        $dat.addClass("active")
    } else {
        $box.addClass("bar");
        $bar.addClass("active")
    }
});

我试过了：当我添加

.fadeOut(1000) 到这里 $box.removeClass("bar").fadeOut(1000);

而.fadeIn(1000)在这里$box.addClass("bar").fadeIn(1000);

它仅在网格视图中淡入，而在淡出时“列表”视图不可见。

看到这个小提琴：（http://jsfiddle.net/Qba5n/问题演示）

请提出在切换时如何在网格/列表之间进行淡入和淡出过渡的建议？

注意：请勿更改HTML，请勿提供任何其他HTML /插件链接。

谢谢：）

手动的

我已经更新了一些代码。我相信这就是你想要的。

检查更新的演示

更新的代码：

$box.fadeOut(1000,function(){
        $box.removeClass("bar").fadeIn()//updated
    });

$box.fadeOut(1000,function(){
            $box.addClass("bar").fadeIn()//updated
        });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。