Jquery 在网格/列表视图之间切换时淡入淡出转换_Jquery_Css

Jquery 在网格/列表视图之间切换时淡入淡出转换

jquery css

Jquery 在网格/列表视图之间切换时淡入淡出转换,jquery,css,Jquery,Css,这是用于在网格视图和列表视图之间切换以显示内容的jQuery脚本。如何在网格视图和列表视图之间切换时提供淡入淡出转换，方法是添加一些字符串，如.fadeOut1000.fadeIn1000 以下是脚本：这是网格/列表HTML源：注意：我不想对HTML做任何更改。谢谢: 下面是演示链接：请参见示例。我希望它能对你有所帮助 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></

这是用于在网格视图和列表视图之间切换以显示内容的jQuery脚本。如何在网格视图和列表视图之间切换时提供淡入淡出转换，方法是添加一些字符串，如.fadeOut1000.fadeIn1000

以下是脚本：

这是网格/列表HTML源：

注意：我不想对HTML做任何更改。谢谢:

下面是演示链接：

请参见示例。我希望它能对你有所帮助

<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>

这是用户3659034提供的答案的修改/优化版本

主要变化：

使用淡出/淡出回调。因此，下一个动画在动画完成时触发，而不是基于设置超时持续时间。尽可能避免设置超时，以利于动画完成回调

将元素存储为变量，因此jQuery不必不断搜索DOM

在就绪事件中删除不必要的内容

我不想对HTML做任何更改，请保留这个。谢谢，但我不想更改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>

<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>

<!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>