JQuery在2个div中滑动_Jquery_Scroll_Jquery Animate_Slideshow

JQuery在2个div中滑动

jquery scroll

JQuery在2个div中滑动,jquery,scroll,jquery-animate,slideshow,Jquery,Scroll,Jquery Animate,Slideshow,我有3个制作幻灯片的div。我想要的是能够点击一个div并让它循环两次。i、当点击div1时，它会在div2中滚动，继续，并在div3处停止。。。。或者单击div2并使其平滑滚动两次，然后在div1处停止现在我只能让它滚动一次到下一个div 这里有两个JSFIDLE示例，虽然我无法让它在2个divs onclick中滚动，但两者都有，只有1个这是我的HTML：和JS： $('.box').click(function() { $('.box').each(function() {

我有3个制作幻灯片的div。我想要的是能够点击一个div并让它循环两次。i、当点击div1时，它会在div2中滚动，继续，并在div3处停止。。。。或者单击div2并使其平滑滚动两次，然后在div1处停止

现在我只能让它滚动一次到下一个div

这里有两个JSFIDLE示例，虽然我无法让它在2个divs onclick中滚动，但两者都有，只有1个

这是我的HTML：

和JS：

$('.box').click(function() {
$('.box').each(function() {
    if ($(this).offset().left < 0) {
        $(this).css("left", "150%");
    } else if ($(this).offset().left > $('#container').width()) {
        $(this).animate({
            left: '50%',
        }, 500 );
    } else {
        $(this).animate({
            left: '-150%',
        }, 500 );
    }
});
});

将动画包装到函数中。仅在单击事件时在下一个元素上再次调用它

var anim = false;

$('.box').on('click', function () {

    anim === false && slide($(this), true);
});

function slide(el, next) {

    anim = true;

    el.animate({
        left: '-50%'
    }, 500, function () {

        el.css('left', '150%');
        el.appendTo('#container');        
    });

    el.next().animate({
        left: '50%'
    }, 500, function () {

        next === true ? slide($(this)) : anim = false;
    });
}

正如@dm4web所指出的，最好在动画发生时防止单击事件触发幻灯片

将动画包装到函数中。仅在单击事件时在下一个元素上再次调用它

var anim = false;

$('.box').on('click', function () {

    anim === false && slide($(this), true);
});

function slide(el, next) {

    anim = true;

    el.animate({
        left: '-50%'
    }, 500, function () {

        el.css('left', '150%');
        el.appendTo('#container');        
    });

    el.next().animate({
        left: '50%'
    }, 500, function () {

        next === true ? slide($(this)) : anim = false;
    });
}

正如@dm4web所指出的，最好在动画发生时防止单击事件触发幻灯片

您需要使用style属性初始化初始状态，因为您具有不同的html属性：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">

    <div id="box1" style="left: -150%" class="box">Div #1</div>
    <div id="box2" style="left: 50%" class="box">Div #2</div>
    <div id="box3" style="left: 250%"class="box">Div #3</div>

</div>

</body>
</html>

在这种情况下，最好使用数组来操纵位置：

var arr = ['-150%', '50%', '250%'],
    children = $('.box'),
    i = children.length,
    time = true,
  transition = function () {
  arr.unshift(arr.pop());
  while(i--) {
    if(parseInt(children[i].style.left) < 0) {
      children[i].style.left = arr[i];
    } else {
      $(children[i]).animate({
        left: arr[i],
      }, 500, function () {
        if(!time){
          time = true;
          transition();
        }
      });
    }  
  }
  i = children.length;
};
$('.box').click(function() {
  if(time) {
    time = false;
    transition();
  }
});

您需要使用style属性初始化初始状态，因为您具有不同的html属性：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="container">

    <div id="box1" style="left: -150%" class="box">Div #1</div>
    <div id="box2" style="left: 50%" class="box">Div #2</div>
    <div id="box3" style="left: 250%"class="box">Div #3</div>

</div>

</body>
</html>

在这种情况下，最好使用数组来操纵位置：

var arr = ['-150%', '50%', '250%'],
    children = $('.box'),
    i = children.length,
    time = true,
  transition = function () {
  arr.unshift(arr.pop());
  while(i--) {
    if(parseInt(children[i].style.left) < 0) {
      children[i].style.left = arr[i];
    } else {
      $(children[i]).animate({
        left: arr[i],
      }, 500, function () {
        if(!time){
          time = true;
          transition();
        }
      });
    }  
  }
  i = children.length;
};
$('.box').click(function() {
  if(time) {
    time = false;
    transition();
  }
});

我花时间用css做这件事：我花时间用css做这件事：@MrUpsidown双击div并在你的回答中观看没有var anim的动画这太完美了。。万分感谢@MrUpsidown双击div，在回答中观看没有var anim的动画这太完美了。。万分感谢！