jquery - 在滑动细节之前，向下/向上滑动不太顺畅，细节和缩略图相关

Question

使用 Bootstrap 3

  <div>
    <div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
    <div class="item active">
    <div class="row">
    <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
    </div>
    <div class="col-sm-3 col-xs-6"><a href="#x"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></a>
    </div>
    </div>
    <!--/row-->
    </div>
    </div>
    <!--/carousel-inner-->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-4"></i></a>

    <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="fa fa-chevron-right fa-4"></i></a>
    </div>
    <!--/myCarousel-->
    <!--expanding more details for certain thumbnail clicked.-->
    <div class="details">
    Thumbnail 1
    </div>
    <div class="details">
    Thumbnail 2
    </div>
    <div class="details">
    Thumbnail 3
    </div>
    <div class="details">
    Thumbnail 4
    </div>
    </div>

CSS

.details{
  display: none;
}

JQuery

$('.thumbnail').on('click', function(e){
console.log('here');
$('.details').slideToggle('slow');
$(this).addClass('active');
$('.thumbnail').removeClass('active');
});

两个问题: 1.向下滑动时，滑动不顺畅。有没有什么办法可以利用CSS3动画让细节上下滑动流畅呢？例如，整个细节 div 应该一次性显示所有信息。 Slidetoggle 向下滑动，在某种意义上一点一点地给出细节。 2.意识到细节div将在缩略图之外。如何将详细信息 div 与单击的缩略图相关联？

已更新 JSFiddle Demo

尝试了 data-rel 以查看它是否在单击特定缩略图时显示特定详细信息，但它似乎不起作用？

Answer 1

对于平滑度问题，请尝试使用 velocity 插件(或类似插件)。它将 animate() 样式命令(使用 velocity() 代替)转换为幕后的 CSS 动画(更流畅)。这通常意味着您必须将所有 slideToggle() 函数等替换为 animate(...) 等价物，然后将它们重命名为 velocity(... )。

极速链接:http://julian.com/research/velocity/

对于第二个问题，使用 data- 属性来标记关联的元素是什么(可以使用 id、类选择器或任何您喜欢的)。

您的 HTML 不完整，但可以这样使用:

<div class="thumbnail" data-rel="#details1">

和

<div class="details" id="details1">
    Thumbnail 1
</div>

并更改点击处理程序以查找相关元素:

$('.thumbnail').on('click', function(e){
    var target = $(this).data('rel');
    var $target = $(target);

    // Close all but the new target and open it
    $('.details').not($target).slideUp();
    $(target).slideDown('slow');

    // Remove active from all active elements
    $('.thumbnail .active').removeClass('active');

    // Add active only to this element
    $(this).addClass('active');
});

JSFiddle:http://jsfiddle.net/TrueBlueAussie/fpx9gvzw/3/

您可以在目标元素上使用带有 ID 的 id 选择器，在目标上使用带有唯一类的类选择器，或者在目标上使用 data- 属性并与 这样的选择器匹配$([data-rel="..."]) 但这要慢得多(这与速度无关紧要)。

注意:我不是“切换”动画方法的忠实粉丝(切换当前元素除外)，因为状态可能会变得困惑，因此使用 not 和 slideUp 和 slideDown 在适当的元素上。