jQuery圖像src fadeOut fadeIn效果

Question

我對此代碼有疑問。 它根本行不通。 該過程在fadinOut圖像上結束。 我是JS的初學者。

編碼：

$(".intro_lg").click(function() {
$(".intro_lg").fadeOut(1000, function() {
    var path = "http://website.com/img/intro2.png";
    $(".intro_lg").attr("src", path);
}).fadeIn(1000);
return false;
});

Answer 1

您可以在頁面准備就緒時嘗試使用.ready()運行代碼：

$(document).ready(function() {
  $(".intro_lg").click(function() {
    $(this).fadeOut(1000, function() {
      var path = "http://website.com/img/intro2.png";
      $(this).attr("src", path);
    }).fadeIn(1000);
    return false;
  });
});

而且，與其重復選擇器，不如使用this 。

這是一個例子

Answer 2

不使用

$(".intro_lg").fadeOut

采用

$(this).fadeOut 

因為“ .intro_lg”是類，並且可以在另一個html元素上。 更好的方法不是替換圖像“ src”，而是隱藏和顯示圖像（存在於dom中），因為瀏覽器加載圖像需要時間。 例如html：

<img src="path1" class="intro_lg" alt=""/>
<img src="path2" class="intro_lg" alt="" style="display: none;"/>

腳本：

$(".intro_lg").click(function() {
$(this).fadeOut(1000, function() {
    $(".intro_lg").next().fadeIn(1000);
});
return false;
});