jquery - 如何切换动画

Question

我有一个效果很好的动画。但我无法扭转它。有人可以给我一个提示吗？

$(".arrowclose").click(function() {
    $(".arrow").animate({ left: "218px" }, 1000, "easeOutQuad");                
    setTimeout(function() {
        $(".arrow").addClass("arrow_right arrowopen");
        $(".arrow").removeClass("arrow_left arrowclose");
}, 1000);
});

$(".arrowopen").click(function() {
    $(".arrow").animate({ left: "486px" }, 1000, "easeOutQuad");
    setTimeout(function() {
        $(".arrow").addClass("arrow_left arrowclose");
        $(".arrow").removeClass("arrow_right arrowopen");
    }, 1000);
});

Answer 1

jsBin demo

试一试，摆脱不需要的课程

$(".arrow").click(function() {     
   $(this).stop().animate({ left: $(this).offset().left > 218 ? 218 : 486 }, 1000, "easeOutQuad", function() {
       $(this).toggleClass("arrowopen, arrowclose");
   });
});

编辑

到目前为止，我知道您需要一个箭头来切换容器的进出，所以您可能想要这个：

jsBin demo 2

将箭头放在容器内：

  <div class="wrapcontent">
    Test
    <div class="arrow arrowopen"></div>
  </div>

相应的样式：

.arrowopen{
  position:absolute;
  right:-20px;
  top:0px;
  cursor:pointer;
  width:20px;
  height:20px;
}
.arrowopen  {background:#cf5;}
.arrowclose {background:#f00;}

.wrapcontent {

 position:absolute;
 width: 300px;
 height:100px;
 background:#888;
 left:-300px;

}

并在箭头上 - >单击动画父容器：

$(".arrow").click(function() {  

   $wrapcontent = $(this).closest('.wrapcontent');
   wrapOffset = $wrapcontent.offset().left;

   $wrapcontent.stop().animate({ left: !wrapOffset ? -300 : 0 }, 1000, "easeOutQuad");
   $(this).toggleClass("arrowopen, arrowclose");

});

Answer 2

这是因为您在 DOM 就绪（您的 arrowopen 类）上不存在的元素上使用了 click 事件。您应该使用 .on() jQuery 方法 -> http://api.jquery.com/on/

Answer 3

尝试这个：

$(".arrowclose").click(function() {
   $(".arrow").animate({
        left: "218px"
      }, 1000, "easeOutQuad",function(){
        $(".arrow").addClass("arrow_right arrowopen").removeClass("arrow_left arrowclose");
    });
});


$(".arrowopen").click(function() {
    $(".arrow").animate({
        left: "486px"
    }, 1000, "easeOutQuad", function(){
       $(".arrow").addClass("arrow_left arrowclose").removeClass("arrow_right arrowopen");
    });
});

试试这个，看看是否有帮助。