码迷,mamicode.com
首页 > Web开发 > 详细

Jquery中滑动效果的实现

时间:2016-04-09 23:43:33      阅读:514      评论:0      收藏:0      [点我收藏+]

标签:

最近由于做项目一直在做网页,然而想要自己的网页变得更加的炫丽,Jquery就必不可少,今天就来说一下自己刚体验到的几个滑动函数。

1.slideDown函数,可以向下滑动元素。调用的方式是$(selecter).slideDown(speed,function());其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数。

2.slideUp函数,与slideUp相反,slideUp是向上滑动元素。调用的方式是$(selecter).slideUp(speed,function());其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数。

3.slideToggle函数,slideToggle函数是slideDown函数和slideUp函数的中和,调用该函数时,如果元素已经向上滑动,那么元素就向下滑动;如果元素已经向下滑动,那么元素就向上滑动,格式为:$(selecter).slideToggle(speed,function())其中selecter是选择的元素,而speed是指滑动的速度,function是指滑动成功后可执行的函数.

 

下面就是我学习它们的一些例子:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slide</title>
<script src="123/jquery.js" type="text/javascript"></script>
</head>
    <body>
        <input id="test1" type="button" value="dianjiwo"></input>
        <input id="test2" type="button" value="dianjiwo2"></input>
        <p class="flip">打开</p>
        <p class="flip2">关闭</p>
        <div class="panel">
        <p>我叫邓远奇</p>
        <p>hello</p>
        </div> 
        <script type="text/javascript">
        $(document).ready(function(){
             $("#test1").click(function(){
                $(".flip").click(function(){
                    $(".panel").slideDown("fast");
                })
                 $(".flip2").click(function(){
                    $(".panel").slideUp("fast");
                })
                $(".flip").click(function(){
                    $(".panel").slideToggle("fast");
                    $("")
                 })
            })             
        </script>
    </body>
</html>

 

Jquery中滑动效果的实现

标签:

原文地址:http://www.cnblogs.com/dengyuanqi/p/5372977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!