fading in my image gallery

Question

Hi; 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

Answer 1

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

Answer 2

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

Answer 3

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