Как анимировать вложенный контент, когда анимированный родительский слайд перемещается в окно просмотра, а не с помощью прокрутки

Question

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

В настоящее время содержимое во вложенном DIV только анимируется, как только команда прокрутки также запускается после перемещения родительского слайда на экран. Я считаю, что это связано с тем, что движение слайдов анимировано и не контролируется прокруткой.

Тот же вопрос в игре в этом JSFiddle демо я создал, чтобы изучить этот вопрос:

http://jsfiddle.net/9dz3ubL1/

(Анимационная движение ползуна справа налево в этой демонстрации была создана для проверки эта проблема, чтобы воспроизвести движение слайда без прокрутки, на самом деле это не особенность разработки).

Мой вопрос в том, как я могу настроить сценарий анимации для каждого вложенного DIV, когда каждый элемент слайда перемещается в область просмотра, не требуя функции прокрутки?

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

$(document).ready(function() { 
 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function() { 
 
    /* Reveal hidden_header delayed */ 
 
    $('.hidden_header').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 500); 
 
     $(this).animate({ 
 
      'right': '0' 
 
     }, 1500); 
 
     } 
 
    }); 
 
    /* Reveal hidden_content delayed */ 
 
    $('.hidden_content').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 3000); 
 
     $(this).animate({ 
 
      'bottom': '0' 
 
     }, 3500); 
 
     } 
 
    }); 
 
    /* Reveal button delayed */ 
 
    $('.button').each(function(i) { 
 
     var center_of_object = $(this).offset().left + $(this).outerWidth(); 
 
     var center_of_window = $(window).scrollLeft() + $(window).width(); 
 
     /* If the object is completely visible in the window, fade it it */ 
 
     if (center_of_window > center_of_object) { 
 
     $(this).animate({ 
 
      'opacity': '1' 
 
     }, 5000); 
 
     } 
 
    }); 
 
    }); 
 
});

Answer 1

Если движение ползун полностью анимированы (не инкрементальные, как это в jsfiddle вы связаны), то JQuery предоставляет вам возможность выполнить действие после того, как ваша анимация будет завершена.

http://api.jquery.com/animate/

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

Использование одного из ваших оживляет в качестве примера, синтаксис может выглядеть следующим образом:

$(this).animate({ 
       'opacity': '1' 
      }, {duration: 3000, done: function() { 
       //animate some stuff here 
    }}; 

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

Я использовал это раньше, чтобы управлять вложенными анимациями в формате слайд-шоу, и это сработало очень хорошо! Надеюсь, это то, что вы хотели.