Question

我需要在一个区块上进行过渡动画，我需要移动我的区块，并在第一次点击时移动display:none并在第二次点击时移回display:block。

我将此用于移动效果：

$('#bthplus').click(function() {
    var $lefty = $('#plushome');

    $lefty
    .animate({
       right: parseInt($lefty.css('right'),10) == 0 ?
  -$lefty.outerWidth() :
  0 

});

完美无缺。对于辅助功能，我需要display:none阻止#plushome当我不在我的视图

时

我试过这个：

  $('#bthplus').click(function() {
    var $lefty = $('#plushome');

    $lefty
    .animate({
       right: parseInt($lefty.css('right'),10) == 0 ?
  -$lefty.outerWidth() :
  0 

})
    .animate({
    display: $lefty.css('display') == "none" ?
  $lefty.css('display'):
  "block"
});
  });

块仍在移动，但显示器没有任何反应。有人知道为什么吗？

更新

我已经读过在这个动画函数中无法调用显示，只能调用不透明度，但这并不能解决我的问题，因为隐藏的元素对于屏幕阅读器是可见的，所以我认为我需要使用show()和hide()函数，但我怎样才能进行相同的测试：

  if( $lefty.css("display") == "none" ){

     $lefty.show();
}else{
$lefty.hide();
};

更新

好的，所以我的上一次编辑工作，并自己找到答案。我还有一个小虫子：

新代码

 $('#bthplus').click(function() {
    var $lefty = $('#plushome');

    $lefty
    .animate({
       right: parseInt($lefty.css('right'),10) == 0 ?
  -$lefty.outerWidth() :
  0 

});
 if( $lefty.css("display") == "none" ){

 $lefty.show();

}else{

  $lefty.hide();
};
  });

并且因为我的元素在开始时是display:none，但是当他到位时他被隐藏了right:0当他离开屏幕时他被隐藏了display:block。我会尽力解决这个问题：）

Answer 1

您可以将jQuery is与visible selector

一起使用

这应该适合你：

function _toggleLefty() {
    var _isVisible = $lefty.is(":visible");
    var _right = parseInt( $lefty.css('right'), 10 );
    // Show element to do animation
    if (!_isVisible) {
        $lefty.css({
            "display": "block",
            "opacity": 0
        });
    }
    // Do animation
    $lefty.animate({
        "opacity": _isVisible ? "0" : "1",
        "right": _isVisible ? "-"+$lefty.outerWidth()+"px" : 0
    });
    // Element is visible so we hide it after animation
    if (_isVisible) {
        // We promise this action after it's complete (could use complete option too)
        $lefty.promise().done(function(){
            $lefty.css("display", "none");
        });
    }
}

您无法使用动画将显示更改为无，但您可以伪造它。

您的代码有一些小问题：

-$lefty.outerWidth()无法使用，您必须执行以下操作："-"+$lefty.outerWidth()
您需要将整数更改为px："-"+$lefty.outerWidth()+"px" : 0)

现在您可以致电_toggleLefty();来制作动画。

您可能还需要检查以确保_right不是NAN（不是数字）

稍微解释一下：

部分// Show element to do animation允许元素可见，但将不透明度保持为0，这样用户就不会看到它。这允许您伪造动画以显示无，因为这样可以设置不透明度和正确移动的动画。

我检查if (_isVisible)的最后一部分是动画完成后强制显示为无的出口。

您可以看到它有效here

请注意，您不必担心_right我离开了那里，以防您想要使用它，但它可以很容易地消除可见性。

更新了演示以复制效果。

jquery。在切换模式下显示动画显示？人物

更新

1 个答案: