web页面设计实训——4.12

最新推荐文章于 2024-07-25 10:06:39 发布

刺槐。

最新推荐文章于 2024-07-25 10:06:39 发布

阅读量256

点赞数

本文链接：https://blog.csdn.net/zwdm945/article/details/89237123

版权

jQuery 链（chaining）
通过jQuery ，可以把方法链接在一起，chaining允许我们在一条语句中运行多个jQuery方法（在相同元素上）
$("p").css({'color':'red'}),slideUp(1500),slideDown(1500),animate({backgroundColor:"blue"},1000)
意思：#p1元素首先会变红，然后向上以1.5秒的速度移动，然后向下以1.5秒的速度移动。最后将背景颜色变为蓝色
如果我们不同链，那么我们的写法是这样的

$("#p1").css({'color':"red"})
$("#p1").slideUp(1500)
$("#p1").slideDown(1500)
$("#p1").animate({backgroundColor:"blue"},1000)

chaining的优点：
浏览去不用多次去查找相同的元素

jQuery动画停止动画 stop（）

<script>
        $(document).ready(function(){
            $("#button").click(function(){
                var div = $("div")
                div.animate({height:'160px',opacity:0.5},3000)
            })
                $("#button1").click(function(){
                    $("div").stop()
                })
        })
</script>
<body>
    <input type="button" value="开始动画" id="button">
    <input type="button" value="暂停动画" id="button1">
    <div style="background-color: red;height: 100px;width: 100px;position: absolute">Hello         world!</div>
</body>

jQuery的基础动画操作
jQuery入口函数：
$("document").ready(function(){ })
相当于

$(function(){ })

1.jQuery动画效果，动画
animate（）方法用于创建自定义的动画
语法：$(selector）.animate({params}，speed,callback)
必须的params参数定义形成动画的css属性

可选参数和上面的几个方法相同

eg:通过animate，把<div>元素向右移动200px

<script>
        $(document).ready(function(){
           $("button").click(function (){
               $("div").animate({left:"200px"},1000,function(){
                   $("div").css({background:"yellow"})
               })
           })
        })
</script>
<body>

<button>开始动画</button>
<p>默认情况下，所有的HTML元素有一个静态的位置，且是不可移动的。如果需要改变那么需要将元素的position属性设置为：absolute，relative，fixed</p>
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>
通过animate（）操作多个属性

<script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:"200px",opacity:'0.5',height:'160px',width:'160px'})
            })
        })
</script>
<body>
<input type="button" value="开始动画" id="button">
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>

是否可以用animate（）方法来操作所有的css属性
几乎可以，但需要记住，当使用animate（）方法的时候，必须使用camel标记法书写所有的属性名
eg：

css：background-color
在animate中：backgroundColor
animate（）使用相对值：

<script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:"200px",opacity:'0.5',height:'160px',width:'160px'})
            })
        })
</script>
<body>
<input type="button" value="开始动画" id="button">
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>

通过animate（），使用队列功能
如果你在彼此之间后编写多个animate（）调用。jQuery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用

<script>
        $(document).ready(function(){
            $("button").click(function(){
                var div = $("div")
                div.animate({height:'160px',opacity:0.5},1000)
                div.animate({fontSize:'2em'},100)
                div.animate({width:'160px',opacity:0.9},1000)
                div.animate({height:'100px',opacity:0.5},1000)
                div.animate({width:'100px',opacity:0.9},1000)
                div.animate({fontSize:'10px'},100)
        })
</script>
<body>
<button>开始动画</button>
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>
</body>

2.jQuery动画效果，滑动
两个方法：

slideDown（）slideUp（）
slideToggle（）
eg：

<style>
        #slide,#panel {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }
        #panel{
            display: none;
            height: 50px;
        }
</style>
<script>
        $(document).ready(function(){
            $("#slide").click(function(){
                $("#panel").slideToggle()
            })
        })
</script>
<body>
<div id="slide">点击我，滑动显示或者隐藏画板</div>
<div id="panel">Hello JQuery!</div>
</body>

3. jQuery动画效果隐藏和显示
两个方法：

hide（） show（）
toggle（）
1.通过使用hide（）和show（）方法来隐藏和显示

<script>
        $("document").ready(function(){ //jQuery入口函数
            $("#button1").click(function(){
                $("p").hide()
            })
            $("#button2").click(function(){
                $("p").show()
            })
        })
</script>
<body>
<p>jQuery动画效果，显示和隐藏</p>
<input type="button" value="隐藏" id="button1">
<input type="button" value="显示" id="button2">
</body>

语法：
$(selector）.hide(speed.callback)
$(selector）.show(speed.callback)
可选参数：
speed参数规定隐藏和显示的速度，取值为“slow”“ fast ”毫秒（1秒等于1000毫秒）
callback参数：是隐藏或显示完成后执行的函数名称
eg:

<script>
        $("document").ready(function(){ //jQuery入口函数
            $("#button1").click(function(){
                $("p").hide(1000)
                alert("恭喜你，隐藏完成")
            })
            $("#button2").click(function(){
                $("p").show(2000,function(){
                    alert("恭喜你，显示成功！")
                })
            })
        })
</script>

2.toggle（）方法：切换hide（）和show（）
语法：
$(selector）.toggle(speed.callback)
可选参数：
speed参数规定隐藏和显示的速度，取值为“show”“ fast ”毫秒（1秒等于1000毫秒）
callback参数：是隐藏或显示完成后执行的函数名称

<script>
      
            $("#button3").click(function(){
                $("p").toggle(1000,function(){
                    $("p").css({color:"green"})
                })
            })
</script>

刺槐。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web页面设计实训——4.12

jQuery 链（chaining）通过jQuery ，可以把方法链接在一起，chaining允许我们在一条语句中运行多个jQuery方法（在相同元素上）$("p").css({'color':'red'}),slideUp(1500),slideDown(1500),animate({backgroundColor:"blue"},1000)意思：#p1元素首先会变红，然后向上以1.5秒...
复制链接

扫一扫