Jquery 设置左边距动画后，宽度将加倍

我正在使用jquery运行一个非常简单的动画。我想将div向左移动，然后向右移动到其原始位置。我从以下几点开始：

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

它正在向左移动。但是，宽度增加了一倍，

div

的右侧没有移动

在布局中，左边距=405，整个宽度为805px

我需要同时移动

div

的右侧

如果我使用

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

div中的文本一直在移动……

请这样尝试

HTML代码：

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

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

现场演示：

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

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

---

快乐编码：）

请提供相关的HTML标记，也许JSFIDLE设置

左边距：

到某个值实际上会增加页面的宽度。而是使用

左：

。