CODEWITHSUNDEEP
jquery
jasmine
jasmine

Reputation:

fading in my image gallery

I have an image gallery and I want to add fade effect, How can I do do this in this code?

$(document).ready(function() {
$(".gallery div").mouseover(function(){
    $(".gallery div").removeClass("current");
    $(this).toggleClass("current");
});
 });

Thanks in advance

Upvotes: 0

Views: 195

Answers (3)

prodigitalson
prodigitalson

Reputation: 60413

$(document).ready(function() {
$(".gallery div").hover(function(){
    $(".gallery div").removeClass("current").fadeOut('fast');
    $(this).toggleClass("current").fadeIn('fast');
});
 });

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630419

Something like this, fades out on mouseout, fades in on hover?

$(document).ready(function() {
  $(".gallery div").mouseover(function(){
    $(".gallery div").removeClass("current").fadeTo(500, 0.25);
    $(this).toggleClass("current").stop().fadeIn(200);
  });
});

You can also do this via the hover() function:

$(document).ready(function() {
  $(".gallery div").hover(function(){
    $(this).addClass("current").stop().fadeIn(200);
  }, function() {
    $(this).removeClass("current").fadeTo(500, 0.25);
  });
});

Upvotes: 0

marcgg
marcgg

Reputation: 66436

Use the fade effect.

You can do fadeIn, fadeOut or fadeTo depending on what you need :

$("p:first").click(function () {
  $(this).fadeTo("slow", 0.33);
});

Upvotes: 2

Related Questions