CODEWITHSUNDEEP
javascriptjqueryimagesrc
Bombel
Bombel

Reputation: 159

jQuery image src fadeOut fadeIn effect

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;
});

Upvotes: 0

Views: 972

Answers (2)

Michael Doye
Michael Doye

Reputation: 8171

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

Upvotes: 1

freethinker
freethinker

Reputation: 2425

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;
});

Upvotes: 0

Related Questions