javascript - 使用 jQuery 流畅地制作动画

Question

我想实现靠近网站“当前促销”部分的动画效果http://www.turningstone.com/ 。请向下滚动到链接主页下方。它位于页 footer 分的正上方。该 block 是正方形 block 的集合。单击第一个 block 时，“ block 的描述”将从左侧滑出，再次单击时，它将恢复到之前的状态。

我创建了一个演示 fiddle 来创建相同的副本。这是Fiddle Demo 。我已将效果添加到第一个 block 中。但是，我无法实现同样的目标。我已经使用“jQuery”动画属性来实现相同的目的。虽然我可以在第一次单击时添加动画，但在第二次单击时，动画效果完全消失，只是想知道“如何”？

以下是单击该 block 时所做的更改。

1. 切换“is--active”类，最终设置“Description”的“Display”属性，即 block 的“promo-content”部分。
2. 向“promo-content”添加“Left”值以将其从左侧滑动。

再次单击“ block ”时，上面列出的两个属性都将被删除。

JS fiddle 演示:

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

});

Answer 1

正在寻找这个？:http://jsfiddle.net/rnLjyfnn/3/

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

如果你看the animate JQuery API page ，你会发现这个:

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

只有在缓动完成后，您才必须删除该类(因为 display 属性)。

<小时/>

此选项启用多行:http://jsfiddle.net/danvim/rnLjyfnn/6