Question

当最后一张照片出现在屏幕上时，如何让div“con”停止？

意思是当我看到右边的最后一张图片时，我希望动画停止工作

谢谢

HTML

<div class="con">
  <div class="conSingle">
    <img src="http://i.imgur.com/cjgKmvp.jpg">
  </div>
  <div class="conSingle">
    <img src="http://i.imgur.com/cjgKmvp.jpg">
  </div>
  <div class="conSingle">
    <img src="http://i.imgur.com/cjgKmvp.jpg">
  </div>
  <div class="conSingle">
    <img src="http://i.imgur.com/cjgKmvp.jpg">
  </div>
  <div class="conSingle">
    <img src="http://i.imgur.com/cjgKmvp.jpg">
  </div>
</div>

JS

$(document).ready(function() {
     $(".con").click(function() {
       $(this).animate({right:"+=100"},1000);
    });
});

Answer 1

这应该适合你：

$(document).ready(function() {
    var last = $(".conSingle:last"), offsetRight;
    $(".con").click(function() {
        if(!$(this).is(":animated")){
            offsetRight = $(window).width() - (last.offset().left + last.width());
            if(offsetRight !== 0){
                if(offsetRight + 100 < 0){
                    $(this).animate({left:"-=100"},500);
                }else{
                    $(this).animate({left:"-="+(-offsetRight)},500);
                }
            }
        }
    });

    $('button').click(function(){
        if(!$(".con").is(":animated")){
            $(".con").animate({left:"0"},500);
        }
    });
});

检查offset right元素的.con，当此offset高于0时，请停止动画。

DEMO： https://jsfiddle.net/lmgonzalves/wd3cky5u/2/

看到最后一张图片后停止jquery动画

1 个答案: