Question

我试图在点击另一个div之后上下滑动div。

这是我的jquery代码：

 $('#SchimbareEmail').click(function () {
        $('.SchimbareParola').animate({top: '+=234px'}, 200);
    });

当我点击 #SchimbareEmail div .SchimbareParola 下降了234 px但是当我再次点击它再次下降时我希望它在234px之后上升第二次点击。是否有人知道如何管理这个？

Answer 1

您可以使用 conditional(ternary) operator

执行此类操作

＆＃13;

$('#SchimbareEmail').click(function() {
  $('.SchimbareParola').animate({
    top: (this.toggle ? '-=234px' : '+=234px')
  }, 200);
  this.toggle = !this.toggle;
});

＆＃13;

<link href="https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<button id="SchimbareEmail">Click!!</button>
<div style="position:relative;width:100px;height:10px;background:black;" class="SchimbareParola"></div>

＆＃13;

Answer 2

添加一个类，说明它是关闭还是关闭。

var div = $('.SchimbareParola');

if(div.hasClass('down')){
    div.animate({top: '-=234px'}, 200).addClass('up').removeClass('down');
} else {
    div.animate({top: '+=234px'}, 200).addClass('down').removeClass('up');
}

然后，在函数中，检查确定是增加还是减少top属性的类。

以这种方式使用类可以帮助您设置样式，并根据其位置管理其他视觉元素。

Jquery再次向上滑动

2 个答案: