jQuery，将对象返回到原始位置

我真的需要一些人帮我写剧本

看看这个，我已经走了这么远了：

$('.box').click(function () {
    $(this).animate({left: '0px'}, 500, function() { 

        var text = $('div.panel');

        if (text.is(':hidden')) {
            text.animate({width: 'toggle'});
            $(this).children('span').html('-');     
        } else {
            text.animate({width: 'toggle'});
            $(this).children('span').html('+');     
        }

    });
});

问题是:

如何使.box div与动画同时向左动画 面板是否可以切换

如何使用“left”将.box恢复到正确的位置： 当我关上它的时候，它离开了

---

使用

data（）

将原始位置存储在元素上，然后您可以在需要时检索该位置

至于同步动画，您可以在长方体动画的回调中设置面板动画。同时给他们打电话

此外，它们还有各种针对关联文本面板的方法。当前，您正在为所有这些对象设置动画。以下使用

next（）

Am使用类

活动

确定框的当前状态

$('.box').click(function() {
  var $box = $(this), // store reference to `$(this)` when you use it more than once
    isActive = $box.hasClass('active'),
    $text = $box.next(), // target correct text panel     
    left, toggleText;
  // store position first time
  if (!isActive && isNaN($box.data('left')) )  {
    $box.data('left', $box.css('left'));
  }
  // set left position and icon text based on active or not
  left = isActive ? $box.data('left') : 0;
  toggleText = isActive ? '+' : '-';
  // toggle panel
  $text.animate({width: 'toggle'});
  // toggle active class and animate
  $box.toggleClass('active').animate({ left: left }, 500);
  $box.children('span').html(toggleText);
});

如果用户在动画完成之前单击框，您可能还希望查看如何使用

stop（）

与动画内联

编辑您自己的代码：

$('.box').click(function() {

  if (!$(this).data("originalLeft")) {
    //you store in data() the original left
    $(this).data("originalLeft", $(this).css("left"));
  }

  $(this).animate({left: '0px'}, 500);
  var text = $(this).next('div.panel');
  if (text.is(':hidden')) {
    text.animate({width: 'toggle'});
    $(this).children('span').html('-');
  } else {
    text.animate({width: 'toggle'});
    $(this).children('span').html('+');
    //you restore the original left value
    $(this).animate({
      "left": $(this).data("originalLeft") 
    }, 500);
  }

});

请记住，如果想要同步动画，应避免在回调函数中调用它们

$(".some-selector").animate({left: 10}, 500, function() {/*second animation*/}}

将始终设置第二个动画，因为第一个动画将结束

---

我总是喜欢CSS动画。它们通常更流畅，但也更难管理时间安排。以下是解决您的问题的基于CSS的方法：

过渡的CSS：

.box      {  transition: left .5s;}
.box.on   {  left: 0 !important; }

.panel    {  transition: width .5s; }
.panel.on {  width: 65% !important; }

Javascript在类上切换

：

$('.box').click(function() {
  var $t = $(this);

  $(".panel.on").not($t.next('.panel')).removeClass('on');
  $(".box.on").not($t).removeClass('on');

  if ($t.hasClass('on')) {
    $t.next('.panel')
      .removeClass('on')
      .one('transitionend', function() {
        $t.removeClass('on');
      });
  } else {
    if ($t.css('left') === "0px") {
      $t.addClass('on').next('.panel').addClass('on');
    } else {
      $t.addClass('on')
        .one('transitionend', function() {
          $t.next('.panel').addClass('on');
        })
    }
  }
});

小提琴：

实际切换所有文本panels@charlietfl：不在我的配置中。。。刚刚编辑了原小提琴。。。你能检查一下吗？可以看到在每个面板中设置特定文本时会发生什么非常感谢，我非常感谢您的帮助。@charlietfl是的。。。注意到