Как постепенно изменить изображение с помощью JQuery

Question

В настоящее время у меня есть сайт, который использует плагин цикла JQuery.Сайт использует плагин для изменения основного фонового изображения.Плагин цикла также создает раздел подкачки в HTML, который в моем случае я настроил как набор изображений.

Я пытаюсь изменить изображение пейджера после активации этой конкретной «страницы».Мне удалось добиться смены изображения, но поскольку на сайте используются довольно плавные переходы, мне хотелось бы, чтобы одно изображение плавно переходило от одного изображения к другому, а затем обратно.

Вы можете увидеть пример этого на данный момент здесь: http://pegaso.mammalworld.com/ наведя курсор на изображение «галереи», вы можете увидеть, как оно работает.

Это функция, которую мне нужно будет изменить, а не затухание/затухание, которое использует Jquery. В идеале это было бы простое затухание до следующего источника изображения, а затем снова затухание:

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

}

ОБНОВЛЯТЬ

Чтобы увидеть эффект на сайте, просто наведите курсор на галерею и наблюдайте, как меняется фоновое изображение, изменяя таким образом изображение пейджера повсюду.Затухание должно быть таким же плавным, как и для фонового изображения...

Помоги пожалуйста!:)

Answer 1

В вашем случае, когда у вас есть два фиксированных изображения, это не так уж и сложно.

1. Установите фон контейнера на изображение, к которому вы хотите перейти.

2. Функция jQuery для затемнения изображения, обнажая фоновое изображение.

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

3. Выгода.

скрипка

http://jsfiddle.net/v6dtE/