Question

所以我的jQuery代码逐渐消失，并且在点击的新图像中。我需要我的代码做的是淡出当前显示的图像并淡入点击的新图像。这是我的第一篇文章，所以如果我无法正确格式化，我很抱歉。

$(document).ready(function() {
    // set up event handlers for links    
    $("#image_list a").click(function(evt) {

       //image swap
        var imageURL = $(this).attr("href");
        $("#image").attr("src", imageURL);



        //image fade out and in with callback function.
        $("#image").fadeOut(1000, function(){
            $(this).fadeOut(1000).fadeIn(1000);
            $("#caption").fadeIn(1000);
        });

    //caption swap
        var caption = $(this).attr("title");
        $("#caption").text(caption);


       //caption fade out and in
        $("#caption").fadeOut(1000);



        // cancel the default action of the link
        evt.preventDefault();
    }); // end click


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

Here is my 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>

Answer 1

如果没有看到您的HTML，很难给出具体的答案，但对于我认为您正在努力完成的事情 - 隐藏点击的图片并显示下一张图片 - 您会想要这些内容

//Listen for click on ANY image
$('.images).click(function(e){
  //Fade out the image
  $('.image-to-fade-out').fadeOut();

  //Fade in the clicked image
  $(this).fadeIn();
})

jQuery淡出当前图像然后淡入点击的图像

1 个答案: