將一個圖像淡入另一個圖像。

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