jQuery .position() возвращает всегда ту же позицию

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

Я пытаюсь сделать это, проверив ползунок div .position() Но он всегда возвращает ту же позицию в моем console.log.

И если я получить правильную позицию #gallery_slider как я могу проверить, если он находится в конце или начать перелива #gallery_slider элемента?

Я сделал jsFiddle: http://jsfiddle.net/ah6yb7bf/1/

Мой JQuery:

var slide  = $('#gallery_slider .gallery-image'); 
var slideWidth = parseInt(slide.width()); 
var slideMargin  = parseInt(slide.css('margin-right')); 
var slides  = $(slide).length; 
var sliderWidth  = (slideWidth + slideMargin) * slides; 
var pos    = $('#gallery_slider').position(); 

$('#gallery_slider').css('width', sliderWidth+'px'); 
$('#product_gallery .gallery-arrow').click(function() { 
    var direction = $(this).attr('data-direction'); 
    var slider = $('#gallery_slider'); 

    console.log(pos.left); 

    if(direction == 'left') { 
     slider.animate({ 
      'left': '-=' + '200px' 
     }, 200); 
    } else { 
     slider.animate({ 
      'left': '+=' + '200px' 
     }, 200); 
    } 

});

HTML:

<div class="wrapper"> 
    <span id="arrow_left" class="gallery-arrow blue-ui" data-direction="right"> 
     <span></span> 
    </span> 
    <div id="gallery_frame"> 

     <div id="gallery_slider"> 
      <a class="gallery-image" rel="group" href="#"><img width="140" height="140" src="http://www.tuinkrant.com/plantengids/bolgewassen/tulpen/thumbs/White%20Dream.jpg"/></a> 
      <a class="gallery-image" rel="group" href="#"><img width="140" height="140" src="http://www.tuinkrant.com/plantengids/bolgewassen/tulpen/thumbs/White%20Dream.jpg"/></a> 
      <a class="gallery-image" rel="group" href="#"><img width="140" height="140" src="http://www.tuinkrant.com/plantengids/bolgewassen/tulpen/thumbs/White%20Dream.jpg"/></a> 
     </div><!--End #gallery_slider--> 

    </div><!--End #gallery_frame--> 
    <span id="arrow_right" class="gallery-arrow blue-ui" data-direction="left"> 
     <span></span> 
    </span> 
</div><!--End .wrapper-->

источник

2014-09-30 Robbert

var pos = $ ('# gallery_slider'). Position(); попробуйте поместить его в функцию щелчка –

@ Paweł Да, это работает! Теперь у меня есть позиция. – Robbert

http://jsfiddle.net/ah6yb7bf/2/ вам нужно поставить

var pos= $('#gallery_slider').position();

внутри функции мыши. Потому что вы проверяете его при загрузке страницы, когда он равен 0; После переезда вам нужно проверить его снова.

источник

2014-09-30 09:10:12

jQuery .position() возвращает всегда ту же позицию

ответ

Смежные вопросы