Question

单击按钮

时如何向左滑动div

有人可以纠正我。

var y = 0;

if (y == 0) {
    $(function(){
        $("#click").click(function() {
            $("#slide").animate({ left: '+=200px' }, 'slow');
            y = 1;
        });  
    });
}
else {
    $(function(){
        $("#click").click(function(){
            $("#slide").animate({ left: '-=200px' }, 'slow');
        });            
    });
}

Answer 1

在您的代码中，if条件仅在页面加载时执行一次，因此只执行if块中的一个单击处理程序。

您需要注册一个单击处理程序，然后需要检查单击处理程序中的条件并执行该处理程序中的相关代码块

$(function () {
    var y = 0;
    $("#click").click(function () {
        if (y == 0) {
            $("#slide").animate({
                left: '+=200px'
            }, 'slow');
            y = 1;
        } else {
            $("#slide").animate({
                left: '-=200px'
            }, 'slow');
            y = 0;
        }
    });
});

＆＃13;

$(function() {
  var y = 0;
  $("#click").click(function() {
    if (y == 0) {
      $("#slide").animate({
        left: '+=200px'
      }, 'slow');
      y = 1;
    } else {
      $("#slide").animate({
        left: '-=200px'
      }, 'slow');
      y = 0;
    }
  });
});

＆＃13;

#slide {
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="click">click</button>
<div id="slide">slide</div>

＆＃13;

您可以使用像

这样的三元运算符来缩短代码

$(function () {
    var y = true;
    $("#click").click(function () {
        $("#slide").animate({
            left: y ? '+=200px' : '-=200px'
        }, 'slow');
        y = !y;
    });
});

＆＃13;

$(function() {
  var y = true;
  $("#click").click(function() {
    $("#slide").animate({
      left: y ? '+=200px' : '-=200px'
    }, 'slow');
    y = !y;
  });
});

＆＃13;

#slide {
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="click">click</button>
<div id="slide">slide</div>

＆＃13;

Answer 2

你只需要将if condition放在正确的位置，这是一个有效的例子

var y = 0;


$(function() {
  $("#click").click(function() {
    if (y == 0) {
      $("#slide").animate({"left": '+=200px'}, 'slow');
      y = 1;
    } else {
      $("#slide").animate({"left": '-=200px'}, 'slow');
      y = 0;
    }
  });
});

div {
  position: absolute;
  background-color: #abc;
  left: 50px;
  width: 90px;
  height: 90px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="click" value="Click Me !" />
<div id="slide" class="block"></div>

单击按钮时如何使div滑动

2 个答案: