Question

<head>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head>
<body>
    <img id='slideshow' src="1.jpg">
    <script>

    $("#slideshow").fadeIn("slow", function() {
        $("#slideshow").attr('src','2.jpg');
    });

   </script>
</body>

我正在尝试创建一个jQuery脚本，其中1.jpg淡出，2.jpg淡入但我只看到1.jpg并且它停留在那里

Answer 1

尝试这样的事情：

$( "#slideshow" ).fadeOut( "slow", function( )  {
    $( "#slideshow" ).prop('src','2.jpg').fadeIn('slow');
});

<强> jsFiddle example

这将淡出原始图像，一旦淡入淡出完成，更改图像的src属性，然后开始淡入新图像。

Answer 2

根据你所说的..如果我理解正确的话......虽然我可能会弄错，但似乎你要求1淡出......改为2 ......并且淡入2？如果是这样，这不起作用吗？

<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>

$("#slideshow").fadeOut();
$("#slideshow").attr('src','2.jpg');
$("#slideshow").fadeIn();

</script>
</body>

这是简单的版本，当然我会假设它会被放在.on()事件之类的函数中等等......

Answer 3

这适用于您添加的许多图片。只要他们有班级slideshow 这也允许您交叉淡化图像。请参阅下面的非交叉淡化见Fiddle.

<head>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head>
<body>
    <img id='slideshow' src="1.jpg">
    <img id='slideshow' src="2.jpg">
    <script type="text/javascript">
        $(document).ready(function () {
            $(".slideshow").hide();

            var item = 0;
            loop = setInterval(function() {
                if(item == $(".slideshow").size()) {
                    item = 0;
                }
                $(".slideshow").fadeOut(300);
                $(".slideshow").eq(item).fadeIn(300);
                item++;
            }, 3000);
        });
    </script>
</body>

<强>非交叉渐变

$(".slideshow").fadeOut(300, function () {
    $(".slideshow").eq(item).fadeIn(300);
});

<强>更新
您可以添加以下css以使图像显示在同一空间中。

.slideshow { position:absolute; }

将一个图像淡入另一个图像。

3 个答案: