jQuery итерация через функцию несколько раз с различными параметрами

Question

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

Я имею установку скрипки отображающую, как это работает: http://jsfiddle.net/e8qX9/35/

Ниже та часть, которая вызывает у меня вопрос:

if ($('#one').doesExist()) { // checks if element exists 
    $(window).scroll(function() { // on scroll 
     addInView('#one', 'slideleft', 0.2); // run function with params 
    }); 
    addInView('#one', 'slideleft', 0.2); // run function again on page load 
} 

if ($('#two').doesExist()) { 
    $(window).scroll(function() { 
     addInView('#two', 'slideright', 0.5); 
    }); 
    addInView('#two', 'slideright', 0.5); 
} 

if ($('#three').doesExist()) { 
    $(window).scroll(function() { 
     addInView('#three', 'slideup', 0.2); 
    }); 
    addInView('#three', 'slideup', 0.2); 
} 

if ($('#four').doesExist()) { 
    $(window).scroll(function() { 
     addInView('#four', 'slidedown', 0.5); 
    }); 
    addInView('#four', 'slidedown', 0.5); 
} 

if ($('#five').doesExist()) { 
    $(window).scroll(function() { 
     addInView('#five', 'slideleft', 0.2); 
    }); 
    addInView('#five', 'slideleft', 0.2); 
} 

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

Благодаря

Answer 1

Ну, на массиве обхвата часть, вы можете иметь это

$('section[id]').each(function(i, e){ 
    $(window).scroll(function() { 
     addInView(e, 'slideleft', 0.2); 
    }); 
    addInView(e, 'slideleft', 0.2); 
}); 

Где раздел [ID] соответствует всему разделу элемента, который имеет идентификатор. Вы должны использовать класс css и попытаться избежать максимально возможного количества id.

Каждый из них выполняет итерацию по этим элементам с помощью функции с i = index и e = element.

Кроме этого, вы регистрируете событие прокрутки в окне для каждого элемента, который у вас есть, и это плохо. Его предпочтительнее регистрировать только одно событие, и там есть необходимая работа. Может найти другой тип события (не уверен, если это будет работать http://api.jquery.com/visible-selector/)

Answer 2

(функция ($) {

$.fn.gAppear = function(options){ 

    var defaults = { 
     slideDuration: 0.2, 
     slideDirection: "slideleft" 
    }; 

    options = $.extend(defaults, options); 

    var appear = $(this); 

    $(window).scroll(function() { 
     addInView(appear, defaults.slideDirection, defaults.slideDuration); 
    }); 
    addInView(appear, defaults.slideDirection, defaults.slideDuration); 


    function isScrolledIntoView(elem, vpoffset) {  
     var docViewTop = $(window).scrollTop(); 
     //$(elem).text(docViewTop); 
     var docViewBottom = docViewTop + $(window).height(); 
     //$(elem).text(docViewBottom); 
     var elemTop = $(elem).offset().top + ($(elem).height()*vpoffset); 
     $(elem).text(docViewBottom+" "+elemTop); 
     return (docViewBottom >= elemTop); 

    } 

    function addInView(trigger, cssClass, vpoffset) { 
     if (isScrolledIntoView(trigger, vpoffset)) { 
      if (!$(trigger).hasClass(cssClass)) { 
       $(trigger).addClass(cssClass); 
      } 
     } 
    } 

};

}) (Jquery); .

// Instantiate

$ ('# один') gAppear ({ slideDirection: "slideright", slideDuration: 0,1 });

$ ('# two'). GAppear ({ slideDirection: "slideleft" });