كيفية fadein صورة تتغير مع مسج

Question

لدي حاليا موقع يستخدم مسج المساعد دورة.الموقع يستخدم البرنامج المساعد لتغيير صورة الخلفية الرئيسية.دورة البرنامج المساعد أيضا يخلق الترحيل في قسم HTML التي في حالتي لقد مخصصة لتكون مجموعة من الصور.

ما أحاول القيام به هو تغيير النداء الصورة مرة واحدة معينة "الصفحة" تنشيط.لقد تمكنت من الحصول على صورة التغيير ولكن كما يستخدم الموقع جدا التحولات على نحو سلس في جميع أنحاء أود أن يكون على نحو سلس تتلاشى من صورة واحدة إلى أخرى ، ثم العودة مرة أخرى.

يمكنك مشاهدة مثال على ذلك في هذه اللحظة هنا: http://pegaso.mammalworld.com/ التي تحوم حول "معرض" الصورة يمكنك أن ترى كيف يعمل.

هذه هي وظيفة من أنه سوف تحتاج إلى تعديل ، بدلا من fadeout/fadein أن يستخدم مسج, ومن الناحية المثالية سيكون بسيطة تتلاشى إلى الصورة التالية المصدر ثم تتلاشى مرة أخرى:

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. وظيفة مسج أن تتلاشى صورة, تعريض الصورة الخلفية.

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

3. الربح.

كمان

http://jsfiddle.net/v6dtE/