Как постепенно изменить изображение с помощью JQuery - PullRequest
Новая
       14

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

3 голосов
/ 15 сентября 2010

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

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

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

Это функция, которую мне нужно изменить, а не затухание /fadein, который использует 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;
    }

}

UPDATE

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

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

1 Ответ

1 голос
/ 15 сентября 2010

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

  1. Установите фон контейнера для изображения, к которому хотите исчезнуть.

  2. Функция jQuery для затухания изображения и экспонирования фонового изображения. 

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

Fiddle

http://jsfiddle.net/v6dtE/

...