图片点击淡出不会加载下一张图片答案

【问题标题】：Image click fadeout won't load the next image图片点击淡出不会加载下一张图片
【发布时间】：2017-10-12 02:07:18
【问题描述】：

我正在尝试编写一个回调函数，在淡出旧图像后淡入下一张图像。但似乎我可以淡出图像，但我只淡化旧图像而不是新图像。我认为第一个 $("#image") 将是旧图像，但我不知道为什么在我重置其属性后它仍然是旧图像。标题中也发生了同样的事情。

这是我的 .js

$(document).ready(function() {
    // set up event handlers for links    
    $("#image_list a").click(function(evt) {
        $("#image").fadeOut(1000,
        function(){
            var imageURL = $(this).attr("href");
            $("#image").attr("src", imageURL).fadeIn(1000);
        });
        $("#caption").fadeOut(1000,
        function(){
            var caption = $(this).attr("title");
            $("#caption").text(caption).fadeIn(1000);
        });

        //var imageURL = $(this).attr("href");
        //$("#image").attr("src", imageURL);
        //$("#image").fadeIn(1000);
        //var caption = $(this).attr("title");

        //$("#caption").text(caption);
        //$("#caption").fadeIn(1000);
        // cancel the default action of the link
        evt.preventDefault();
    }); // end click

    // move focus to first thumbnail
    $("li:first-child a").focus();
}); // end ready

这是我的 .html

<body>
    <main>
        <h1>Ram Tap Combined Test</h1>
        <ul id="image_list">
            <li><a href="images/h1.jpg" title="James Allison: 1-1">
                <img src="thumbnails/t1.jpg" alt=""></a></li>
            <li><a href="images/h2.jpg" title="James Allison: 1-2">
                <img src="thumbnails/t2.jpg" alt=""></a></li>
            <li><a href="images/h3.jpg" title="James Allison: 1-3">
                <img src="thumbnails/t3.jpg" alt=""></a></li>
            <li><a href="images/h4.jpg" title="James Allison: 1-4">
                <img src="thumbnails/t4.jpg" alt=""></a></li>
            <li><a href="images/h5.jpg" title="James Allison: 1-5">
                <img src="thumbnails/t5.jpg" alt=""></a></li>
            <li><a href="images/h6.jpg" title="James Allison: 1-6">
                <img src="thumbnails/t6.jpg" alt=""></a></li>
        </ul>
        <h2 id="caption">James Allison: 1-1</h2>               
        <p><img src="images/h1.jpg" alt="" id="image"></p>
    </main> 
</body>
</html>

【问题讨论】：

标签： javascript jquery

【解决方案1】：

this 有问题，注意 that 替换 this

$("#image_list a").click(function(evt) {
    // Here this is element of #image_list a
    var that = this;
    $("#image").fadeOut(1000, function(){
        // Here this is element of #image
        var imageURL = $(that).attr("href");
        $("#image").attr("src", imageURL).fadeIn(1000);
    });
    $("#caption").fadeOut(1000, function(){
        // Here this is element of #image
        var caption = $(that).attr("title");
        $("#caption").text(caption).fadeIn(1000);
    });

    //var imageURL = $(this).attr("href");
    //$("#image").attr("src", imageURL);
    //$("#image").fadeIn(1000);
    //var caption = $(this).attr("title");

    //$("#caption").text(caption);
    //$("#caption").fadeIn(1000);
    // cancel the default action of the link
    evt.preventDefault();
}); // end click

【讨论】：

很高兴能帮上忙。