实现jQuery下滑效果

Question

我有一个jQuery向下滑动动画，但是我想在下面的粘贴部分实现它。

内容是针对较小的设备的，因此每个按钮都需要在其自身上附加向下滑动的元素。

有人可以告诉我如何做到这一点。

我的jQuery slideDown代码：

$(".squere").click(function(){    
    $(".content").hide(800);
    $(".squere").removeClass("active");
    $(this).addClass("active");
$(this).next(".content").slideDown(1000);
});

矿山含量：

            <div id="squere" class='container hidden-lg hidden-md '>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">

                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
                    </div>
                    <div class="col-sm-4 col-xs-4">Strange book here :)</div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
                    </div>
                </div>

小提琴的例子，这是整个过程，它是响应式的，所以不要介意html部分的上部圆圈。

Answer 1

好。 我刚刚修改了您的代码，仅添加了3张图片和一个content div，如下所示：

演示

的HTML

<div class="container">
        <div class="row">
              <div class="col-sm-4 col-xs-4">

                   <a href="#" class="center">
                        <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
                   </a>
                   <div class="content">
                         Content Image 1
                   </div>

              </div>
              <div class="col-sm-4 col-xs-4">
                   <a href="#" class="center">
                        <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
                   </a>
                   <div class="content">
                        Content Image 2
                   </div>

               </div>
               <div class="col-sm-4 col-xs-4">
                   <a href="#" class="center">
                        <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
                   </a>
                <div class="content">
                     Content Image 3
                </div>
          </div>
    </div>    
</div>

JS

$(document).ready(function(){
   $('.content').hide();
});

$(document).on('click',".center",function(){   
     if($(this).hasClass('active'))
     {
         return;
     }
    $(".content").hide(800);
    $(".center").removeClass("active");
    $(this).addClass("active");
     $(this).next(".content").show(1000);
});

注意：这些只是基本的动画。 如果您确实想执行一些.animate动画，则需要检查.animate jquery函数。

Answer 2

只需使用sildeDown和效果基本show可以解决您的problem.Try此提琴 。 只是使用了slideUp和slide Down方法来代替添加和删除活动类。

$(document).ready(function(){
   $('.content').hide();
});

$(document).on('click',".center",function(){   
    $(".content").slideUp(300);
    $(this).next(".content").slideDown(300);
});

Answer 3

请使用ID选择器#代替类选择器.

$("#squere").click(function(){    
    $(".content").hide(800);
    $("#squere").removeClass("active");
    $(this).addClass("active");
     $(this).next(".content").slideDown(1000);
});

可能是您的问题。

$("#squere").removeClass("active");
$(this).addClass("active");

这些行不会产生任何效果，因为您要删除并添加相同的CSS类。