Javascript 将fadeIn/fadeOut集成到内容切换脚本中_Javascript_Jquery

Javascript 将fadeIn/fadeOut集成到内容切换脚本中

javascript jquery

Javascript 将fadeIn/fadeOut集成到内容切换脚本中,javascript,jquery,Javascript,Jquery,我正在创建图像拼贴/拼图。我正在使用massy.js来展示我需要的内容，我在这个网站上找到了一个脚本来随机更改div内容（在两幅图像之间）然而，我想要一个简单的方法来设置这个图像切换的动画，但是我的javascript/jquery知识非常有限以下是我的网站的完整代码： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.j

我正在创建图像拼贴/拼图。我正在使用massy.js来展示我需要的内容，我在这个网站上找到了一个脚本来随机更改div内容（在两幅图像之间）

然而，我想要一个简单的方法来设置这个图像切换的动画，但是我的javascript/jquery知识非常有限

以下是我的网站的完整代码：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="jquery.masonry.min.js"></script>
        <style>
            #container {
                width: 350px;
                height: 420px;
                border: solid 1px #000;
            }
            .item {
                width: 105px;
                height: 105px;
                margin: 0;
                float: left;
            }
            .item_2 {
                width: 245px;
                height: 105px;
                margin: 0;
                float: left;
            }
            .item_3 {
                width: 245px;
                height: 210px;
                margin: 0;
                float: left;
            }
        </style>
        <script type="text/javascript">
            var logSwitch =[
                "<img src='apps/TRA-100.gif' />",
                "<img src='apps/logistics.gif' />",
            ];

            setInterval(function() {
                var i = Math.round((Math.random()) * logSwitch.length);
                if (i == logSwitch.length) --i;
                $("#logistics").html(logSwitch[i]);
            }, 5 * 1000);
        </script>
    </head>
    <body>
        <div id="container">
          <div class="item_3"><img src="apps/auto.gif" /></div>
          <div class="item"><div id="logistics"><img src="apps/TRA-100.gif" /></div></div>
          <div class="item"><img src="apps/marine.gif" /></div>
          <div class="item"><img src="apps/its.gif" /></div>
          <div class="item_2"><img src="apps/Entertain.gif" /></div>
          <div class="item_2"><img src="apps/meteor.gif" /></div>
          <div class="item"><img src="apps/aviation.gif" /></div>
        </div>
        <script type="text/javascript">
            var $container = $('#container');
            $container.imagesLoaded(function(){
                $container.masonry({

                    columnWidth : 300
                );
            });
        </script>
    </body>
</html>


#容器{
宽度：350px；
高度：420px；
边框：实心1px#000；
}
.项目{
宽度：105px；
高度：105px；
保证金：0；
浮动：左；
}
.项目2{
宽度：245px；
高度：105px；
保证金：0；
浮动：左；
}
.项目3{
宽度：245px；
高度：210px；
保证金：0；
浮动：左；
}
无功逻辑开关=[
"",
"",
];
setInterval（函数（）{
var i=Math.round（（Math.random（））*logSwitch.length）；
如果（i==logSwitch.length）——i；
$（#logistics”）.html（logSwitch[i]）；
}, 5 * 1000);
var$container=$（“#container”）；
$container.imagesLoaded（函数（）{
$container.com({
列宽：300
);
});

有人能告诉我们该朝哪个方向走吗？这个小提琴：（）看起来很简单，但我不知道如何实现它

提前感谢。

现在您替换了

#logistics

中的HTML，但没有做任何事情使其褪色。您链接到的演示JSFIDLE的工作方式是在父元素上调用

fadeOut（）

，完成后调用

fadeIn（）

在同一元素上运行，同时为其提供新内容

以下是如何在代码中执行相同的操作：

替换

$("#logistics").html(logSwitch[i]);

…与

$('#logistics').fadeOut(500, function() {
    $(this).html(logSwitch[i]).fadeIn(500);
});

编辑：如果您不想随机切换内容，请不要将其设置为随机！相反，请将

设置在

setInterval（）

之外，然后只需在其中更改

var i = 0;
setInterval(function() {
     i++;
     if (i == logSwitch.length) {
          i = 0;
     }
     $('#logistics').fadeOut(500, function() {
          $(this).html(logSwitch[i]).fadeIn(500);
     });
}, 5000);

@MatthewPeckham，很高兴我能帮上忙！有没有办法我也可以改变随机相位，使它总是从一个切换到另一个？当它停留在同一个图像上时，淡入效果看起来是不必要的。或者设置它，使淡入效果只在图像改变时发生？我问了很多，我知道…@MatthewPeckham看到更新的答案；我知道墨水应该会处理好的，但如果没有，请告诉我。效果很好。谢谢。