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

2 つの固定イメージがある場合、それはそれほど難しくありません。

1. コンテナの背景をフェードさせたい画像に設定します。

2. 画像をフェードアウトして背景画像を露出させる jQuery 関数。

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

3. 利益。

フィドル

http://jsfiddle.net/v6dtE/