Question

我真的可以在我写的脚本上使用一些帮助。

看看这个，我到目前为止：

$('.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('+');     
        }

    });
});

jsFiddle

问题是：

我如何这样做.box div同时动画到左边小组翻转？
如何使用＆＃39; left＆＃39;将.box带回正确的位置： originLeft 当我关闭它时？

Answer 1

使用data()在元素上存储原始位置，然后您可以在需要时检索它。

对于同步动画，您可以在框动画的回调中对面板进行动画处理。同时打电话给他们。

他们还有各种方法来定位相关的文本面板。目前，您正在为所有这些设置动画。以下使用next()

使用课程active来确定方框的当前状态

$('.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()内嵌动画

的 DEMO

Answer 2

编辑自己的代码：

$('.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*/}}

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

jsFiddle

Answer 3

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

过渡的CSS：

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

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

Javascript切换on类：

$('.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');
        })
    }
  }
});

小提琴：

https://jsfiddle.net/82vg42b1/

jQuery，将对象恢复到原始位置

3 个答案: