Question

我正在制作图像拼贴/拼凑。我正在使用masonry.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>

任何人都可以建议我们前往哪个方向？这个小提琴:( http://jsfiddle.net/jWcLz/1/）看起来很简单，但我不知道如何实现它。

提前致谢。

Answer 1

现在你替换#logistics中的HTML，但没有做任何事情让它褪色。您链接到作品的演示jffiddle的方式是在父元素上调用fadeOut()，并且在完成调用同一元素上的fadeIn()函数时，同时也为其提供新内容。

以下是您在代码中执行相同操作的方法：

替换...

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

...与...

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

编辑：如果您不希望随机切换内容，请不要随意进行！相反，请在i之外设置setInterval()，然后只更改其中的i。

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

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

1 个答案: