Question

我使用jquery运行一个非常简单的动画。我想将div移到左边，然后移到右边的原始位置。我从这开始：

 var leftCards = '-'+ $(".target").width() +'px';
 $(".target").stop().animate({'margin-left': leftCards });

向左移动。但是，宽度加倍，而div的右侧没有移动......

在布局中，margin-left = 405，完整宽度为805px ....

我需要以某种方式同时移动div的右侧......

如果我使用

$(".target").stop().animate({'margin-left': leftCards,width:0 });

div中的文字一直在移动......

Answer 1

以这种方式试试

HTML CODE：

 <div class="target"></div>
    <button id="left">Left</button>
    <button id="right">Right</button>
 <div class="tarWidth" style="top:100px;position:relative"></div>

JQUERY CODE：

var rightCards = 0;
var leftCards = 0;

// Start animation
$("#left").click(function () {
   leftCards = '-' + $(".target").width() + 'px';
   $(".target").stop().animate({
       'left': leftCards
   });
   $('.tarWidth').text($(".target").width() + 'px');
});

// Start animation in the opposite direction
$("#right").click(function () {
    rightCards = '+' + $(".target").width() + 'px';
    $(".target").stop().animate({
       'left': rightCards
     });
    $('.tarWidth').text($(".target").width() + 'px');
});

现场演示：

http://jsfiddle.net/7y5he/12/

快乐编码：）

动画边缘后左边宽度加倍

1 个答案: