Web页面设计实训课堂笔记06DYL

XUEXIWEIYUAN'

于 2019-04-13 20:09:47 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/weixin_44762370/article/details/89286866

版权

JQuery学习

jQuery语法

1、${selector).hide(speed,callback) 2、$(selector).show(speed,callback) 3、speed参数规定隐藏和显示的速度，取值为“slow”,"fast",毫秒（1秒等于1000毫秒）。4、$(selector).toggle(speed,callback)

//callback参数是隐藏或显示完成后执行的函数名称。

效果练习代码如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#button1").click(function (){
                $("p").hide(2000)
            })
            $("#button2").click(function (){
                $("p").show(2000,function (){
                    alert("恭喜你，显示完成")
                })
            })
            $("#button3").click(function (){
                $("p").toggle(1000,function (){
                    $("p").css({color:"blue"})
                })
            })
        })
    </script>
</head>
<body>
<p> jquery动画效果隐藏与显示</p>
<input type="button" value="隐藏" id="button1" >
<input type="button" value="显示" id="button2" >
<input type="button" value="按钮" id="button3" >
 
</body>
</html>

//hide()方法：是把指定的元素隐藏 /shoe()方法：是把指定元素显示出来。

2、滑动效果：slide()代码练习


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <style>
        #slide,#panel {
            padding: 5px;
            text-align: center;
            background-color: peachpuff ;
            border: 1px solid burlywood ;
        }
        #panel{
            display: none;
            padding: 40px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#slide").click(function (){
                $("#panel").slideToggle()
            })
        })
    </script>
</head>
<body>
<div id="slide">点击我，滑动显示或者隐藏面板</div>
<div id="panel">hello</div>
</body>
</html>

//slide()方法：slideUp()方法是把指定元素伸展，slideDown()方法是把指定元素压缩

3、创建自定义的动画：animate（）方法将<div>元素右移200px代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function (){
                $("div").animate({left:"200px"},1000,function (){
                    $("div").css({background:"pink"})
                })
            })
        })
    </script>
</head>
<body>
<button>开始动画</button>
<p></p>
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>

$(selector).animate({params}),speed,callback)

//默认情况下，所有的HTML元素有一个静止的位置，且是不可移动的，如果需要改变，那将要把元素的position属性改为：absolute,relative,fixed.

animate使用相对值代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#button").click(function (){
                $("div").animate({
                    left:"200px",opacity:'0.5',height: '160px',width: '160px'
                })
            })
        })
</head>
<body>
<input type="button" value="开始动画" id="button" >
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>

//几乎可以用animate()方法来操作所有的CSS属性，但需要记住，当使用animate()方法的时候，必须使用camel标记法书写所有的属性名，eg：css.background color在animate中：backgroundColor.

使用animate()方法实现开始和暂停动画代码练习


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#button").click(function (){
                var div = $("div")
                div.animate({height:"160px",opacity:0.5},5000)
            })
            $("#button1").click(function (){
                $("div").stop()
            })
           
        })
    </script>
</head>
<body>
<input type="button" value="开始动画" id="button" >
<input type="button" value="暂停动画" id="button1" >
<div style="background-color: red;width: 100px;height: 100px;position:absolute"></div>
</body>
</html>

XUEXIWEIYUAN'

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web页面设计实训课堂笔记06DYL

JQuery学习jQuery语法1、${selector).hide(speed,callback) 2、$(selector).show(speed,callback) 3、speed参数规定隐藏和显示的速度，取值为“slow”,"fast",毫秒（1秒等于1000毫秒）。4、$(selector).toggle(speed,callback)//callback参数是隐藏或显示...
复制链接

扫一扫