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 you can see by clicking here。

我获得了灵感from this fiddle，唯一的区别是我将其从切换更改为点击。

我不是最聪明的JS编码器，所以请耐心等待：D。我会感激任何答案！

提前致谢！

Answer 1

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

基本上我们将变量open设置为false，点击检查以查看open是否为false，如果是，则将open设置为{{ 1}}（因为它现在打开）然后打开它，如果没有，然后将true设置为open并关闭它

（Demo）

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链接。您不需要“动画”功能的所有这些选项设置。顺便说一句，我是这个网站的新手，我不知道为什么我这么快就被投票了。如果“downvoter”可以告诉我为什么我可以学习并改进我的答案......

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

2 个答案: