How to change image using jQuery

Question

I currently have a site that uses the jQuery loop plugin. The site uses a plugin to change the main background image. The loop plugin also creates a swap section in HTML, which in my case I configured as a set of images.

What I'm trying to do is change the image of the pager when this "page" is activated. I managed to get a change in the image, but since the site uses pretty smooth transitions in everything, I would like to have a smooth fade from one image to another and then back.

Here you can see an example of this: http://pegaso.mammalworld.com/ , hovering over the gallery image, you can see how it functions.

This is the function I need to change, not the fadeout / fadein that Jquery uses, ideally it would be a simple disappearance of the following image source, and then it will disappear again:

function onAfter() {

    var myclass = $( ".activeSlide" ).find('img').attr('class');
    //alert(myclass);

    switch (myclass) {
        case "image-1":
            $(".image-1").attr("src","/images/image_small_01_off.jpg");            
            $('.image-2').fadeTo('fast', 0.5, function() {
                $(this).attr("src","/images/image_small_02.jpg").fadeTo("slow", 1);
            });

        break;
        case "image-2":
            $(".image-2").attr("src","/images/image_small_02_off.jpg");
            $('.image-3').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_03.jpg").fadeTo("slow", 1);
            });                
        break;

        case "image-3":
            $(".image-3").attr("src","/images/image_small_03_off.jpg");
            $('.image-4').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_04.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-4":
            $(".image-4").attr("src","/images/image_small_04_off.jpg");
            $('.image-5').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_05.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-5":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow', 1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        case "image-6":
            $(".image-5").attr("src","/images/image_small_05_off.jpg");
            $('.image-6').fadeTo('slow',1, function() {
                $(this).attr("src","/images/image_small_06.jpg").fadeTo("slow", 1);
            });
        break;

        default :
        $(".image-1").attr("src","/images/image_small_01_off.jpg");
        $(".image-2").attr("src","/images/image_small_02_off.jpg");
        $(".image-3").attr("src","/images/image_small_03_off.jpg");
        $(".image-4").attr("src","/images/image_small_04_off.jpg");
        $(".image-5").attr("src","/images/image_small_05_off.jpg");
        $(".image-6").attr("src","/images/image_small_06_off.jpg");
        break;
    }

}

UPDATE

To see the effect on the site, just hover over the gallery and see how the background image changes, thus changing the image of the pager. Attenuation should be as smooth as for a background image ...

Help me please!:)

Answer 1

In your case, when you have two fixed images, this is not so difficult.

• Set the container background for the image you want to fade.

• jQuery , .

  $('img').hover(function() {
       $(this).animate({
           opacity: 0
       }, 500);
   }, function() {
       $(this).animate({
           opacity: 1
       }, 500);
   });​
  

• Profit.

Fiddle

http://jsfiddle.net/v6dtE/