jQuery滑动

最新推荐文章于 2022-07-22 10:30:42 发布

原创最新推荐文章于 2022-07-22 10:30:42 发布 · 274 阅读

CC 4.0 BY-SA版权

本文介绍了通过jQuery在元素上创建滑动效果的方法，包括slideDown()、slideUp()和slideToggle()。详细演示了各方法的使用，如设置样式、代码编写，还说明了可选的speed参数。其中，slideToggle()可在slideDown()与slideUp()之间切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;的可以有可以无
因为你在上滑完成状态时再点一下他就下滑了
你在下滑完成状态时点击的话他也会上滑。