На прокрутке get div со слайд вниз

Question

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

$(window).scroll(function(){ 

    /* Check the location of each desired element */ 
    $('.research-revealed').each(function(i){ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it it */ 
     if(bottom_of_window > bottom_of_object){ 

      $(this).slideToggle("slow", function() { 
       // Animation complete. 
      }); 

     } 

    }); 

}); 

Answer 1

Как только он достиг желаемой точки, установите флаг, указывающий, что он анимирован.

var animated = false; 

$(window).scroll(function(){ 

    /* Check the location of each desired element */ 
    $('.research-revealed').each(function(i){ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it it */ 
     if(bottom_of_window > bottom_of_object && animated == false){ 
      animated = true; 
      $(this).slideToggle("slow", function() { 
      // Animation complete. 
      }); 
     } 
    }); 
}); 

Вы также не должны быть обязательными, чтобы это событие окна прокрутки, но вместо того, чтобы использовать requestAnimationFrame или придушить событие с интервалом. ТАКЖЕ вы должны удалить событие после активации анимации.

[Update] Двигаясь дальше на этом ...

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

http://codepen.io/jasonhulbert/pen/ZbNoZG

В JS, вы увидите одну polyfill и два модуля. Обычно я не включал их в тот же файл, что и здесь, но я только что вложил их и завернул в закрытие SEAF. Я обычно использую их как модули commonJS. Полипол для window.requestAnimationFrame, а два модуля, которые я создал, - FrameEvent и InView.

FrameEvent - это простой сценарий, который я использую для управления прокруткой и изменением размера обратных вызовов, которые используют requestAnimationFrame.

InView - это то, что я использую для отслеживания элементов, находящихся в «в» или «вне» зрения (в окне). По мере прокрутки пользователя он переключит значение атрибута data-inview на in или out. Он также указывает направление прокрутки тела по атрибуту scroll-direction. Вы также можете ассоциировать обратные вызовы, которые запускаются, когда элемент входит или выходит из вида (что полезно в вашем случае).

InView конкретизируется как так (это входит в нижней части JS):

var inview = new InView(); 
inview.addStage({ 
    element: '.item' 
}); 

Вот все варианты вы можете перейти к .addStage():

element: 'section', // the element to look for 
attr: 'data-inview', // the name of the inview attribute 
inVal: 'in', // the value of the attribute when in view 
outVal: 'out', // the value of the attribute when out of view 
offsetTop: 0, // pixels 
offsetBottom: 0, // pixels 
delayIn: 0, // in milliseconds 
delayOut: 0, // in milliseconds 
inCallback: false, // callback when element comes into view 
outCallback: false // callback when element goes out of view 

Таким образом, в вашем случае , вы можете использовать InView для (A) применения свойств css с помощью селектора в вашем css, например .item[data-inview="in"] { //...props }, или (B) установить опцию inCallback функции, которая запускает анимацию, которую вы в настоящее время используете. Контекст в вашем обратном вызове будет элементом.

Итак, вот что.

var inview = InView(); 
inview.addStage({ 
    element: '.item', // the element you're looking for 
    offsetTop: 100, // wait until the element is 100px within view 
    inCallback: function(el) { 
     $(el).slideToggle(); // do your animation stuffs 
    } 
}); 

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

Answer 2

api.jquery.com:

slideDown() - Description: Display the matched elements with a sliding motion.

slideUp() - Description: Hide the matched elements with a sliding motion.

Так что, если вы хотите, чтобы скрыть элемент, вы должны использовать slideUp. Не волнуйся, это будет похоже, что он скользит вниз. См. Это FIDDLE