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。

Answer 2

jsFiddle demo

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

    $('.details').stop().slideUp('slow');                       // all up!
    $('.details[data-rel='+rel+']').stop().slideToggle('slow'); // this toggle

    $('.thumbnail').removeClass('active'); // Remove from all
    $(this).addClass('active');            // Add to this
});

在滑动细节之前，向下/向上滑动并且细节和缩略图不太相关

2 个答案: