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

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

这将淡出原始图像，一旦淡入淡出完成，更改图像的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 。
这也允许您交叉淡化图像。 请参阅下面的非交叉淡化。
看到这个小提琴。

<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);
});

UPDATE
您可以添加以下css以使图像显示在同一空间中。

.slideshow { position:absolute; }

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

问题描述

3 个解决方案

解决方案1
2 2014-01-14 20:27:46

解决方案2
0 2014-01-14 20:27:39

解决方案3
0 已采纳 2014-01-14 20:31:13

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

问题描述

3 个解决方案

解决方案1 2 2014-01-14 20:27:46

解决方案2 0 2014-01-14 20:27:39

解决方案3 0 已采纳 2014-01-14 20:31:13

解决方案1
2 2014-01-14 20:27:46

解决方案2
0 2014-01-14 20:27:39

解决方案3
0 已采纳 2014-01-14 20:31:13