CODEWITHSUNDEEP
javascriptjquery
corning
corning

Reputation: 25

Add fade effect to jQuery image replace on hover script

There were a few topics about this already but they didn't quite help in my case. I've written a small script to change the image source of some social icons when hovered over. I'm trying to add a fadeIn and fadeOut effect so it isn't just a straight up image swap. Here is my script:

$(".social_icons").live('hover', function() {
  if ($(this).attr("class") == "social_icons") {
    this.src = this.src.replace("-black","-color");
  } else {
    this.src = this.src.replace("-color","-black");
  }
  $(this).toggleClass("on");
});

How can I add a fadeIn/fadeOut effect to this?

Upvotes: 1

Views: 351

Answers (1)

Sushanth --
Sushanth --

Reputation: 55750

Try this

$(".social_icons").live('hover', function() {
    var $curr = $(this);
     if ($(this).attr("class") == "social_icons") {
        $curr.fadeOut('slow', function () {
            $curr.attr('src', this.src.replace("-black","-color"));
            $curr.fadeIn('slow');
        });
    } else {
        $curr.fadeOut('slow', function () {
            $curr.attr('src', this.src.replace("-color","-black"));
            $curr.fadeIn('slow');
        });
  }
  $(this).toggleClass("on");
});

Upvotes: 1

Related Questions