Question

我试图在点击的图像淡出后显示图像。由于某种原因，它无法正常工作。谁知道什么是错的？

JSfiddle是：http://jsfiddle.net/1ahwhqdm/1/

HTML： -

<img id="picture" src="http://i.dailymail.co.uk/i/pix/2013/11/11/article-2500617-007F32C500000258-970_306x423.jpg">

使用Javascript： -

$(document).ready(function () {
    var imageName = ["http://www.coloring-painting-pages.com/c-pics/Donald-Duck.jpg", "http://www.thinksnaps.com/wp-content/uploads/2014/07/RTGRX9rTL.jpeg", "http://www.search-best-cartoon.com/cartoon-mouse/cartoon-mouse-and-cheese-04.jpg"];
    var indexNum = 0;
    $("#picture").click(function () {
        $("#picture").fadeOut(300, function () {
            $("#picture").attr("src", imageName[0]);
        });
    });
});

Answer 1

使用此代码

 $("#picture").attr("src", imageName[0]).fadeIn(200);

而不是

$("#picture").attr("src", imageName[0]);

Live Demo

希望它可以帮助你

Answer 2

你淡出了画面。只是因为你改变src并不意味着它会重新开始。尝试：

$(document).ready(function () {
    var imageName = ["http://www.coloring-painting-pages.com/c-pics/Donald-Duck.jpg", "http://www.thinksnaps.com/wp-content/uploads/2014/07/RTGRX9rTL.jpeg", "http://www.search-best-cartoon.com/cartoon-mouse/cartoon-mouse-and-cheese-04.jpg"];
    var indexNum = 0;
    $("#picture").click(function () {
        $("#picture").fadeOut(300, function () {
            $("#picture").attr("src", imageName[0]);
        }).delay(100).fadeIn(300); //Have to fade back in.
    });
});

我试图在点击的图像淡出后显示图像

2 个答案: