Question

我正在尝试从左到中，从右到中间为2个按钮设置动画，现在我希望它们对父级div的“向左对齐”和“向右对齐”。两个按钮均在屏幕外启动。

我现在所拥有的：我通过使用'margin-left'和'margin-right'以及'％'来制作两个动画。在我调整窗口大小之前，此方法可以正常工作。

看看我的jsfiddle：https://jsfiddle.net/janoshh/wqn7d8Lp/1/

HTML：

<div class="container">
 <div class="row">
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
   <div class="button1">
    <button type="button" id="button1" class="btn btn-success 
button">Button1</button>
  </div>
</div>
 <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 button2_wrapper">
  <div class="button2">
    <button type="button" id="button2" class="btn btn-success 
button">Button2</button>
  </div>
</div>

jQuery：

$('.button1')
 .css("margin-left", -$(this).width())
 .animate({
 marginLeft: '60%'
}, 700);

$('.button2')
 .css("margin-right", -$(this).width())
 .animate({
 marginRight: '60%'
}, 700);

CSS：

.button2_wrapper {
  text-align: right;
 }

有什么建议可以解决这个问题吗？

谢谢

jQuery从左到右和从右到左为动画“文本对齐”

0 个答案: