0

我正在创建图像拼贴/拼凑。我正在使用 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/）看起来很简单，但我不知道如何实现它。

提前致谢。

4

1 回答 1

1

现在你替换了 中的 HTML #logistics，但没有做任何事情让它消失。您链接到的演示 jsfiddle 的工作方式是调用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);
于 2013-05-23T08:29:04.437 回答