zoukankan      html  css  js  c++  java
  • Jquery中滑动效果的实现

    最近由于做项目一直在做网页,然而想要自己的网页变得更加的炫丽,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>

  • 相关阅读:
    Linux Process Memory Usage
    ezwinports
    Linux程序调试查看二进制文件
    Build tcpdump for ARM
    Tomcat start/stop script
    Apache+PHP+MySQL
    查看安装的glibc版本
    CodeMirror
    GeSHi Generic Syntax Highlighter
    C++命令行解析库
  • 原文地址:https://www.cnblogs.com/dengyuanqi/p/5372977.html
Copyright © 2011-2022 走看看