实现 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>

Fiddle 示例，这是整个潜水，它是响应式的，所以不要介意 html 部分中的上圈。

Answer 1

请使用 id 选择器 # 而不是 class 选择器 .

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

可能是你的问题。

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

这些行不会产生任何效果，因为您正在删除和添加相同的 css class。

Answer 2

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

DEMO

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 jquery 函数。

Answer 3

只需使用 sildeDown 和 slideUp 就可以解决你的problem.Try这个fiddle。只是使用 slideUp 和 slide Down 方法来代替添加和删除活动 class.

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

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

实现 jQuery 下拉效果

Implement jQuery slidedown effect

html

javascript

css

jquery

jquery-mobile