jQuery滑动

jQuery滑动
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：vs· jQuery基础
作者： xqll
撰写时间：2019/5/7
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()

先是来演示一下slideDown（）方法

<style type="text/css">
        div.panel, p.flip {
            margin: auto;
            padding: 5px;
            text-align: center;
            background: blue;
            border: solid 1px #c3c3c3;
            width: 500px;

        }
        div.panel {
            height: 120px;
            display: none;
        }

先是设置一下它们的样式
然后slideDown（）方法的代码是

$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
  });

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒
然后是完善一下设置

<div class="panel">
        <p>weaeafadasd</p>
    </div>
    <p class="flip">请点击这里</p>
</body>

得到的样式是这样的

当点击以后

需要的画面就滑动出来了
然后slideDown（）是设置往下滑动的方法
而jQuery slideUp()方法是设置往上滑动的
下面让我们来演示一下jQuery slideUp()方法
元素是跟slideDown（）上面的一样
但是我们要改变一下

div.panel {
            height: 120px;
            /*display: none;*/
        }

把display：none；注释掉，因为我们是要往上滑动
而display：none；已经把需要滑动的给隐藏掉了
就没有东西可以滑动了

然后slideUp()的代码是

$(document).ready(function () {
    $(".flip").click(function () {
        $(".panel").slideUp("slow");
    });
});

与上面的相反 点击了点击事件以后 就往上滑了
样式的话
一开始是

点击后是

所以说 它们是相反的

前面两种方法都是比较单一的 但是也没有把这两个功能合在一起的办法呢
方法是肯定有的
下面 我来样式一下好用的jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

下面是slideToggle() 方法的代码

$(document).ready(function () {
    $(".flip").click(function () {
       $(".panel").slideToggle("slow");
    });
});

slideToggle()方法是不用设置display: none;的 可以有 可以无
因为你在上滑完成状态时 再点一下他就下滑了
你在下滑完成状态时点击的话他也会上滑。