jQuery图像src fadeOut fadeIn效果

Question

I have a problem with this code. It simply does not work. The process ends on fadinOut the image. I'm beginner in JS.

The code:

$(".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

You can try running your code when the page is ready using .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;
  });
});

And rather than repeating your selectors, use this instead.

Here is an Example

Answer 2

Do not use

$(".intro_lg").fadeOut

use

$(this).fadeOut 

because ".intro_lg" is class and can be on another html elements. And better way for this is not replace image "src", but hide and show images(exists in dom), because image loading by browser is take time. for example html:

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

Script:

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