使用jQuery流畅地制作动画

我想实现接近网站http://www.turningstone.com/的"当前促销"部分的动画效果。请向下滚动到链接的主页下方。它位于页脚部分的上方。方块是方块的集合。在第一个块上点击，"块的描述"会从左边滑出来，再点击一次，它会恢复到以前的状态。

我已经创建了一个演示小提琴来创建相同的副本。这是小提琴演示。我已经将效果添加到第一个块。然而，我无法做到这一点。我使用了"jQuery"动画属性。虽然我可以在第一次点击时添加动画，但在第二次点击时，动画效果完全消失了，只是想知道"怎么"?

这是在点击块时所做的更改。

1. 切换一个类"is——active"，最终设置块的"Description"即"promoo -content"部分的"Display"属性。
2. 为" promoo -content"添加"Left"值，使其从左侧滑动。

在另一个点击块，上面列出的两个属性将被删除。

JS Fiddle Demo:

JS Fiddle Demo

参考网址:

"turningstone.com"当前促销板块

HTML

<div class="row">
    <div class="col-xs-4">
        <img src="http://lorempixel.com/320/320/city/" class="img-responsive">
        <div class="promo-content">
            <div class="row">
                 <h4>Hello</h4>
            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <img src="http://lorempixel.com/320/320/city/" class="img-responsive">
    </div>
    <div class="col-xs-4">
        <img src="http://lorempixel.com/320/320/city/" class="img-responsive">
    </div>
</div>

CSS:

.col-xs-4 {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    cursor:pointer;
}
.promo-content {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 25px;
    color: #fff;
    top: 0;
    background: #ff3e3e;
    z-index: 1;
}
.is--active .promo-content {
    display: block;
}

jQuery:

var width = $(".row .col-xs-4").width(); //Caluclate Width of Each Column
var tw_width = $(".row .col-xs-4").width() * 2; // Width of a column * 2 = Width of Promo Content Box i.e the red box
$('.promo-content').css('width', tw_width); // Assign the width of Promo content box
var left__promoblock = $('.row .col-xs-4:nth-child(3n+1)');
left__promoblock.click(function () {
    $(this).toggleClass('is--active');
    if ($(this).hasClass("is--active")) {
        $(this).find('.promo-content').animate({
            left: width
        }, 'fast');
    } else {
        $(this).find('.promo-content').animate({
            left: -width
        }, 'fast');
    }
});

left__promoblock.click(function () {
    var $this = $(this);
    if (!$this.hasClass("is--active")) {
        $this.addClass('is--active');
        $this.find('.promo-content').animate({
            left: width
        }, 'fast');
    } else {
        $this.find('.promo-content').animate({
            left: -width
        }, 'fast', function(){
            $this.removeClass('is--active');
        });
    }
});

.animate( properties [, duration ] [, easing ] [, complete ] )