Question

这是用于在网格和列表视图之间切换以显示内容的jQuery脚本。如何通过添加像.fadeOut(1000) .fadeIn(1000)这样的字符串，在网格和列表视图之间切换时，提供淡入和淡出过渡。< / p>

这是脚本：

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>

Answer 2

这是user3659034提供的答案的修改/优化版本。

主要变化：

使用了fadeOut / fadeIn回调。因此，下一个动画在动画完成时触发，而不是基于setTimeout持续时间。尽可能避免使用setTimeout来支持动画完成回调。
将元素存储为变量，因此jQuery不必不断搜索DOM。
在准备好的活动中删除了不必要的内容。

http://jsbin.com/pirileke/1/edit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
<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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$('#check').click(function(){
    var list = $("#list");
    var check = $('#check');
    var grid = $('#grid');

    if(list.is(':visible')){
        list.fadeOut("fast", function() {
            grid.fadeIn("slow");
            check.text('View List');
        });
    } else {
        grid.fadeOut("fast", function() {
            list.fadeIn("slow");
            check.text('View Grid');
        });
    }
});
</script>
</body>
</html>

在网格/列表视图之间切换时，淡入和淡出过渡

2 个答案: