4.09

最新推荐文章于 2020-11-10 16:50:12 发布

zxm996

最新推荐文章于 2020-11-10 16:50:12 发布

阅读量289

点赞数

本文链接：https://blog.csdn.net/zxm996/article/details/89289023

版权

1. 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>

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动画效果，动画
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中：backgroundColoranimate（）使用相对值：
<script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:"200px",opacity:'0.5',height:'+=15px',width:'+=15px'})
            })
        })
</script>通过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>

zxm996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.09

1. jQuery动画效果隐藏和显示两个方法：hide（） show（）toggle（）1.通过使用hide（）和show（）方法来隐藏和显示<script> $("document").ready(function(){ //jQuery入口函数 $("#button1").click(function(){ ...
复制链接

扫一扫