Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jquery плагин для множества элементов (https://javascript.ru/forum/jquery/29777-jquery-plagin-dlya-mnozhestva-ehlementov.html)

W1nD 10.07.2012 21:30

jquery плагин для множества элементов
 
Добрый день! У меня вознилка проблема, я пишу небольшой плагин, который бы перемещал элементы на странице при скроле
$(document).ready(function () {  
    $(window).on('scroll', function () {
    	$('.avatar').animatePosition({
            	'direction': 'right'        	
    	});        
    });
});

Все отлично работает для одного элемента, если же элементов больше, плагин работает только для первого элемента
(function ($) {
    var el_factor = null,
        el_animation_start_coordinate = null,
        win_scrool_coordinate = null,
        el_top_position = null,
        coff_scroll = null,
        cache_scroll_position = null,
        el_left_coordinate = null,
        el_animation_end = null,
        result_coordinate = null;

    var get_el_position = function get_el_position(context) {
            var $this = $(context);

            el_animation_end = $this.data('coordinate-end-animation')
            el_animation_start_coordinate = $this.data('coordinate-start-animation');

            el_top_position = $this.offset().top;
            winscrool_coordinate = viewport_size.window_scroll_y(); //scroll coordinate

            coff_scroll = (el_top_position - el_animation_start_coordinate) / el_animation_end;
            coff_scroll = Math.round(coff_scroll)
            return coff_scroll, winscrool_coordinate, el_top_position, el_animation_start_coordinate;
        }
/* code plugin */
    $.fn.animatePosition = function (options) {
        	return $(this).each(function(){
        		get_el_position(this);
	            var $this = $(this),
	                direction = options.direction;
	            if (direction == 'right') {
	                result_coordinate = $this.parent().width() - $this.position().left - $this.width();
	            } else if (direction == 'left') {
	                result_coordinate = $this.position()[direction];
	            }
	            /*check sroll top or bottom*/
	            diff_last_scroll_position = winscrool_coordinate - cache_scroll_position;
	            el_coordinate = result_coordinate + coff_scroll;
	            if (winscrool_coordinate >= el_animation_start_coordinate && diff_last_scroll_position > 0 && el_coordinate < el_animation_end) {
	                console.log('result_coordinate', result_coordinate)
	                $this.css(direction, el_coordinate)
	            }
	            if (el_left_coordinate >= el_animation_end) {
	                $this.addClass('endMoveElement')
	            }
	            cache_scroll_position = viewport_size.window_scroll_y()
        	})
            
    }
}(jQuery))

В чем может быть проблема?

zlodeeev 11.07.2012 15:02

Потому что метод у тебя расчитан на один элемент, а не на массив, который будет в $this, а соответственно не сработают $this.position()

W1nD 11.07.2012 16:49

Не свсем понимаю где я допустил ошибку, вроде в коде самого плагина я делаю перебор всех элементов
return $(this).each(function(){})

может быть я что-то не так понял(

zlodeeev 11.07.2012 16:53

Тоуп, each я не заметил, глубочайше извиняюсь..

А viewport_size откуда берется?

W1nD 11.07.2012 17:51

береться из кода, который я не указал


Часовой пояс GMT +3, время: 19:16.