jQuery父动画第二次单击（关闭/回滚）不起作用

Question

我在获取带有动画的功能以进行第二次/结束点击时遇到问题。 它可以在第一次点击时起作用...这是代码：

HTML：

<div id="about">
  <div id="aboutbtn-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  <div id="aboutbtn">About me</div>
  <div class="social-icons">
    <a href="#"><img src="http://placehold.it/43x43"></a>
    <a href="#"><img src="http://placehold.it/43x43"></a>
  </div>
</div>

CSS：

#about {
  background: #336699;
  height: 561px;
  width: 300px;
  position:absolute;
  top: 0%;
  right:-285px;
}

#aboutbtn {
  background: #336699;
  background-size: contain;
  background-repeat: no-repeat;
  width: 85px;
  height: 35px;
  text-align: center;
  padding: 35px 10px;
  font-size: 18px;
  cursor: pointer;
  color: #fff;
  position: absolute;
  left: -85px;
  margin-top: 20px;
  margin-right: 15px;
  display: block !important;
}

#aboutbtn-content {
  float: left;
  padding: 35px 30px;
}

.social-icons {
  position: absolute;
  left: -63px;
  top: 140px;
}

.social-icons img {
  display: block;
  margin-bottom: 10px;
}

Javascript：

$(document).ready(function () {
$("#aboutbtn").click(function () {
    $(this).parent().animate({
        right: '-280px'
    }, {
        queue: false,
        duration: 500
    });
}, function () {
    $(this).parent().animate({
        right: '0px'
    }, {
        queue: false,
        duration: 500
    });
});
});

我做了一个jsfiddle，您可以通过单击此处查看 。

我从这个小提琴中得到了灵感，唯一的不同是我将其从切换更改为单击。

我不是最敏锐的JS编码器，所以请忍受：D。 我将不胜感激！

提前致谢！

Answer 1

这是一种非常简化的方法，没有将类添加到dom元素然后一遍又一遍地查询dom元素的额外开销。

基本上，我们将变量open设置为false ，单击以查看open是否为false ，如果是，则将open设置为true （因为现在已打开），然后将其打开；如果不是，则将open设置为false并关闭它

（ 演示 ）

var open = false;
$("#aboutbtn").click(function () {
    if(!open) $(this).parent().animate({ right: '0px'}, 500);
    else $(this).parent().animate({ right: '-285px'}, 500);
    open = !open ? true : false;
});

Answer 2

试试这个吧。

由于您在动画叠加方面遇到问题，因此这些代码只是确保div在正确的位置以允许打开或关闭动画。

http://jsfiddle.net/bdasilva/93v3qayh/9/

$("#aboutbtn").click(function () {
    var parentPos = $(this).parent().css('right').split('px')[0];
    var targetPos = (parentPos == 0 ? -280 : 0);
    $(this).parent().animate({right:targetPos}, 500);
});

我缩短了代码，并在上一次编辑时提供了jsfiddle链接。 您不需要为“动画”功能设置所有这些选项。 顺便说一句，我是这个网站的新手，我也不知道为什么我这么快就被否决了。 如果“拒绝投票者”可以告诉我为什么我可以学习并改善答案...