Создание изображения исчезают, не прыгая при прокрутке?

Question

Here you can see the problem as JSFiddle

Я поставил 5 различных точек прокрутки, на каждом есть другое изображение выцветания и 5 других из так же, как это:

 $("#active1").finish().fadeIn(2000); 
     $("#active2").finish().fadeOut(2000); 
     $("#active3").finish().fadeOut(2000); 
     $("#active4").finish().fadeOut(2000); 
     $("#active5").finish().fadeOut(2000); 

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

Однако, когда я перехожу к другой точке, между двумя точками прокрутки, появляется другое изображение.

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

Answer 1

Не совершенный, но я заменил .finish() на .stop(true,false), чтобы очистить очереди анимации без завершения анимации, что должно помочь уменьшить скачки непрозрачности изображения. затухание в этой версии, хотя и несовершенно, если пользователь прокручивает слишком быстро.

Конструкторы изображения были перемещены за пределы .bind() вызова, чтобы избежать восстановления на каждое событие прокрутки, а сам .bind() вызов был заменен .on() в соответствии с рекомендациями JQuery.

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

Fiddle here

$(function() { 

    var Impressum = new Image(); 
    Impressum.src = 'BaumImpressum.jpg'; 

    var Beratung = new Image(); 
    Beratung.src = 'BaumBeratung.jpg'; 

    var Therapie = new Image(); 
    Therapie.src = 'BaumTherapie.jpg'; 

    var Profil = new Image(); 
    Profil.src = 'BaumProfil.jpg'; 

    for (var i, i = 1; i < 6; i++) { 
    var active = "#active" + i + ',#active_logo' + i; // describe the selectors 
    $(active).fadeIn(1000); 
    } // fade everything in to start 

    function activeFade(n) { 
    for (var i, i = 1; i < 6; i++) { 
     var active = "#active" + i + ',#active_logo' + i; // describe the selectors 
     var action = $(active).stop(true, false); 
     if (i === n) { 
     action.fadeIn(2000); 
     } else { 
     action.fadeOut(2000); 
     } // stop true false -clears the animation queue without completing the animation 
    } 
    } // cycle through all five id's and fade out - except for the chosen one 

    $('#content_area').on("scroll.alert", function() { 

    var $this = $(this); 
    //Leben 
    if ($this.scrollTop() >= 0) { 
     $('h1').css('color', '#694d6d'); 
     $('h2').css('color', '#694d6d'); 
     $('h3').css('color', '#694d6d'); 
     $("#Text1scroll").css('color', '#ffffff'); 
     $("#Text2scroll").css('color', '#694D6D'); 
     $("#Text3scroll").css('color', '#694D6D'); 
     $("#Text4scroll").css('color', '#694D6D'); 

     activeFade(1); 

     $('.top').css('background-color', '#F9AE00'); 
     $('.footer1').css('background-color', '#694D6D'); 

    } 
    //Beratung 
    if ($this.scrollTop() >= 600) { 
     $('h1').css('color', '#4c6f21'); 
     $('h2').css('color', '#4c6f21'); 
     $('h3').css('color', '#4c6f21'); 
     $("#Text1scroll").css('color', '#4C6F21'); 
     $("#Text2scroll").css('color', '#ffffff'); 
     $("#Text3scroll").css('color', '#4C6F21'); 
     $("#Text4scroll").css('color', '#4C6F21'); 
     //$('.rightA').css('background-image', 'url(BaumBeratung.jpg)'); 

     activeFade(2); 

     $('.top').css('background-color', '#fec542'); 
     $('.footer1').css('background-color', '#88a450'); 
    } 
    //Therapie 
    if ($this.scrollTop() >= 1300) { 
     $('h1').css('color', '#c5471d'); 
     $('h2').css('color', '#c5471d'); 
     $('h3').css('color', '#c5471d'); 
     $("#Text1scroll").css('color', '#c5471d'); 
     $("#Text2scroll").css('color', '#c5471d'); 
     $("#Text3scroll").css('color', '#ffffff'); 
     $("#Text4scroll").css('color', '#c5471d'); 

     activeFade(3); 

     $('.top').css('background-color', '#c8cce9'); 
     $('.footer1').css('background-color', '#ee7033'); 
    } 
    //Profil 
    if ($this.scrollTop() >= 2000) { 
     $('h1').css('color', '#9a4d75'); 
     $('h2').css('color', '#9a4d75'); 
     $('h3').css('color', '#9a4d75'); 
     $("#Text1scroll").css('color', '#9a4d75'); 
     $("#Text2scroll").css('color', '#9a4d75'); 
     $("#Text3scroll").css('color', '#9a4d75'); 
     $("#Text4scroll").css('color', '#ffffff'); 

     activeFade(4); 

     $('.top').css('background-color', '#C0D360'); 
     $('.footer1').css('background-color', '#DE6CA8'); 

    } 
    //Impressum 
    if ($this.scrollTop() >= 2500) { 
     $('h1').css('color', '#694d6d'); 
     $('h2').css('color', '#694d6d'); 
     $('h3').css('color', '#694d6d'); 
     $('h4').css('color', '#694d6d'); 
     $("#Text4scroll").css('color', '#694d6d'); 

     activeFade(5); 

     $('.top').css('background-color', '#F9AE00'); 
     $('.footer1').css('background-color', '#694D6D'); 

    } 
    }); 
});