jquery - 在网格/ ListView 之间切换时的淡入和淡出过渡

Question

这是用于在网格和 ListView 之间切换以显示内容的 jQuery 脚本。如何在网格和 ListView 之间切换时通过添加一些像这样的字符串 .fadeOut(1000) 来提供淡入和淡出过渡.fadeIn(1000).

这是脚本:

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")
    }
});

这是(网格/列表)HTML 源:

<div id="main-wrapper">
<div class="switch">
<div class="switch-right">
<a class="bar_view" href="#">Grid</a>
<a class="dat_view" href="#">List</a>
</div>
</div>
<div class="main section" id="main">
<div class="widget Blog" id="Blog1">

<div class="blog-posts hfeed">
<!--Content Start -->
<div class="post bar hentry">
Content
</div>
<div class="post bar hentry">
Content
</div>
<div class="post bar hentry">
Content
</div>
<div class="post bar hentry">
Content
</div>
<!--Content End -->
</div>

</div>
</div>
</div>

注意:我不想对 HTML 进行任何更改。谢谢:)

这是演示链接:http://bbelog-megagrid.blogspot.com

Answer 1

看一个例子。希望对您有所帮助。 :)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<div id="list" style="width: 200px; height: 200px; color:#fff; background-color: #f00;display: none;">List View</div>
<div id="grid" style="width: 200px; height: 200px; color:#000;  background-color: #0f0;">Grid View</div>
<button id="check">View Grid</button>
<script>
$(document).ready(function(){
    $('#check').click(function(){
        if($('#list').is(':visible')){
            $('#list').fadeOut("fast");
            setTimeout(function(){
                $('#grid').fadeIn("slow");
                $('#check').text('View List');
            },200);
        }else{
            $('#grid').fadeOut("fast");
            setTimeout(function(){
                $('#list').fadeIn("slow");
                $('#check').text('View Grid');
            },200);
        }
    });
});
</script>