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

确定。我刚修改了您的代码，只添加了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 2

只需使用sildeDown，slideUp就可以解决您的问题。试试这个fiddle。刚刚使用slideUp和Slide Down方法代替添加和删除活动类。

    <div id="idd" ng-controller="MainCtrl">
        '{{aaa}}'
        <button ng-click="$log.log(aaa)">log</button>


    </div>
</div>
<script>
    'use strict';
    var app = angular.module('app', []);
    app.controller('MainCtrl', ['$scope','$log', 
        function($scope,  $log) {
            $scope.aaa = 'bbb';
            $scope.$log = $log;
            //console.log($scope.aaa);
            //console.log($scope.$parent);
        }
    ]);
</script>

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类。

实现jQuery slidedown效果

3 个答案: