jquery-滑动效果

最新推荐文章于 2024-07-15 10:19:27 发布

饭一碗

最新推荐文章于 2024-07-15 10:19:27 发布

阅读量680

点赞数 1

分类专栏： jquery 文章标签： jquery-滑动效果 slideUp slideDown slideToggle

老铁们，没点关注点波关注哈~

本文链接：https://blog.csdn.net/fanrenxiang/article/details/78782139

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jquery slideDown()

实现元素向下滑动效果

语法：

$(selector).slideDown(speed,callback);

（可选）speed参数：规定等待的效果时长，可取："slow"、"fast"、毫秒

（可选）callback参数：滑动完成后的回调函数名称

jquery slideUp()

实现元素向上滑动效果

语法：

$(selector).slideUp(speed,callback);

参数释义同上

jquery slideToggle()

综合切换上两者效果

语法：

$(selector).slideToggle(speed,callback);

参数释义同上

效果代码：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
  $(function(){
   $("#slidedown").click(function(){
     $("#content").slideDown();
   });
   $("#slideup").click(function(){
    $("#content").slideUp();
   });
   $("#slidetoggle").click(function(){
    $("#content").slideToggle();
   });
})
</script>
<style type="text/css">
.upper{width:auto;height:auto;border:1px solid #000;background:lightgray}
</style>
</head>
<body>
<div class="button"><input type="button" id="slidedown" value="下滑效果"/>    <input type="button" id="slideup"value="上滑效果"/>    <input type="button" id="slidetoggle" value="综合切换"/></div>
<br/>
<div class="upper" id="content">这里是文字代码和阅读代码时碰到的比较难以理解的一个关键字，也是各大公司的面试官喜欢在面试时问到的知识点之一。下面就先讲述一下static关键字的用法和平常容易误解的地方，最后列举了一些面试笔试中常见的关于static的考题。以下是本文的目录大纲</div>
</body>
</html>