用回調方法卡住動畫

我目前正在學習JQuery。當選擇新圖像時，我需要使舊圖像淡出並且新圖像淡入。我有選擇圖像的代碼，但現在我需要把它放在回調方法中，淡出當前圖像並淡入新圖像。衰落持續時間是1秒。我被困在試圖完成這一點。任何幫助，將不勝感激。我到目前爲止的代碼是：用回調方法卡住動畫

$(document).ready(function() { 
 
    // preload images 
 
    $("#image_list a").each(function() { 
 
    var swappedImage = new Image(); 
 
    swappedImage.src = $(this).attr("href"); 
 
    }); 
 

 
    // set up event handlers for links 
 
    $("#image_list a").click(function(evt) { 
 
    var caption = $(this).attr("title"); 
 
    var imageURL = $(this).attr("href"); 
 
    $("#caption").text(caption); 
 
    $("#image").attr("src", imageURL); 
 
    // cancel the default action of the link 
 
    evt.preventDefault(); 
 
    }); 
 
});

<!DOCTYPE HTML> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Image Swap</title> 
 
    <link rel="stylesheet" href="main.css" /> 
 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
 
    <script src="image_swap1.js"></script> 
 
</head> 
 

 
<body> 
 
    <section> 
 
    <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> 
 
    </section> 
 
</body> 
 

 
</html>

來源

2015-06-22 Blazto

_ 「需要做舊形象淡出，當選擇一個新的圖像中的新圖像褪色」 _'.fadeOut（）'，'.fadeIn（）'不出現在'js'？可以在問題中包含'html'？ – guest271314

這應該工作：

1）使圖像淡出。

2）然後經過一定的延遲後，使其淡入新的值。

$(document).ready(function() { 
 
    $("#image_list a").click(function(e) { 
 
    e.preventDefault(); 
 
    $('#image').fadeOut(500); 
 
    change($(this)).delay(500); 
 
    }); 
 
}); 
 

 
var change = function(img) { 
 
    var caption = img.attr("title"); 
 
    var imageURL = img.attr("href"); 
 
    $("#caption").text(caption); 
 
    $("#image").attr("src", imageURL); 
 
    $("#image").fadeIn(); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <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> 
 
</section>

來源

2015-06-22 04:12:11

用回調方法卡住動畫

回答

相關問題