jQuery прокрутка к fadein и анимация одновременно на div

Question

Я пытаюсь получить этот jQuery правильно, но я просто не могу понять, как это правильно. То, что я пытаюсь сделать, - это прокрутить список пользователей, и когда они перейдут к соответствующему пределу пикселя, произойдет jQuery fadein и animate, создав классный небольшой эффект. Я пытался использовать fadeIn, но он не работал одновременно, поэтому я использую css. Проблема в том, что пока я работаю, когда я продолжаю прокручивать, изображения продолжают мигать и гаснуть.

Вот мой код.

$(window).bind("scroll", function() { 
    if ($(this).scrollTop() > 560) { 
     $('#subOverlay').css({'display':'block', 'opacity':'0'}) 
     .animate({'opacity':'1','left':'25%'}, 1500); 
    } else { 
     $("#subOverlay").stop().fadeOut(); 
    } 
}); 

Вы заметите в своем коде выше, я хочу, чтобы пользователю прокручивать до 560 пикселей, а затем эффекты работают одновременно. Я попытался исправить это «мерцание», но я просто не могу его получить. Я попытался использовать .fadeIn(1000).animate({'opacity':'1','left':'25%'}, 1500);, но он не создает эффект, который я пытаюсь достичь одновременно.

Для примера того, о чем я говорю, см. JSFIDDLE. Вы можете помочь? Или указать мне в правильном направлении? Спасибо.

Answer 1

По возможности старайтесь избегать использования jQuery для работы с CSS. Это включает в себя css, animate, fadeOut и т.д. Вот пример, где JavaScript только переключает классы:

http://jsfiddle.net/05Leto4e/1/