jQuery动画方法

2023-11-10 06:45•html•阅读 1947

一、.hover方法

　　　描述：将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

　　 .hover()方法是同时绑定 mouseenter和 mouseleave事件。我们可以用它来简单地应用在鼠标在元素上行为。

　　　调用$(selector).hover(handlerIn, handlerOut)是以下写法的简写：　　

　　$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

　　下面示例为模拟鼠标悬停

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
                div{
                        width:200px;
                        height: 200px;
                        border: 1px solid red;
                }
                .over{
                        background-color: yellow;
                        border: 5px dashed green;
                        color: blue;
                }
                .out{
                        background-color: red;
                        border: 5px solid yellow;
                        color: pink;
                }
        </style>
        <script src='jquery-3.1.1.js'></script>
</head>
<body>
        <div>这是个有故事的div</div>
</body>
</html>
<script>
        $('div').hover(function(){
                this.className = 'over';
        },function(){
                this.className = 'out';
        })
</script>

二、动画方法

　　jQuery中的动画效果都可以指定3种速度参数”slow”、”normal”、”fast”，甚至以毫秒为单位进行添加动画效果。

　　1.show()显示元素与hide()隐藏元素。

　　示例：点击标签，显示和隐藏div

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>显示与隐藏</title>
        <link rel="stylesheet" href="donghua.css">
        <script src='jquery-3.1.1.js'></script>
</head>
<body>
        <h3>点我咯</h3>
        <div>这是个有故事的div</div>
</body>
</html>
<script>
        var flag = true
        $('h3').bind('click',function(){
                if(flag){
                        $(this).next().hide();
                }else{
                        $('div').show();
                }
                flag = !flag;
        })
</script>

　　2.fadeIn()与fadeOut()淡入淡出方法(颜色变淡最后消失)

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src='jquery-3.1.1.js'></script>
        <style>
                *{
                        margin: 0;
                        padding: 0;
                }
                div{
                        width: 100px;
                        height: 100px;
                        background-color: green;
                }

        </style>
</head>
<body>
        <h3 >点我看看咯</h3>
        <div>这是个有故事的div</div>
</body>
</html>
<script>
        var flag = true;
        $('h3').click(function(){
                if(flag){
                        $(this).next().fadeOut(5000);
                }else{
                        $('div').fadeIn(5000);
                };
                flag = !flag;
        })
</script>

　　3.slideUp()和slideDown()滑动方法

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>滑动动画显示</title>
        <link rel="stylesheet" href="donghua.css">
        <script src="jquery-3.1.1.js"></script>
</head>
<body>
        <h3>点我咯</h3>
        <div>梅刚是傻逼</div>
</body>
</html>
<script>
        var flag = true;
        $('h3').click(function(){
                if(flag){
                        $(this).next().slideUp(3000);
                }else{
                        $('div').slideDown(3000);
                }
                flag = !flag
        })
</script>

　　Css样式

*{
                        margin: 0;
                        padding:0;
                }
div{
                        background-color: red;
                        width: 200px;
                        height: 200px;
                        position: relative;
                }
h3{
                        background-color: green;
                        width: 200px;
                }

　　4.animate(params,[speed],[callback])自定义动画方法　　

　　参数说明：

　　params:一个包含样式属性及值的映射

　　speed:速度参数，可选

　　callback:动画完成时执行的函数，可选

　　注意：使用animate()方法之前，必须将元素的position样式改为”relative”或”absolute”

　　animate()方法可以实现

　　自定义简单动画

　　累加、累减动画(通过”+=”或”-=”设置位置)

　　(按顺序执行)多重动画

　　利用动画回调函数实现动画完成时的设置

　　判断元素是否处于动画状态

　　if(!$(element).is(“:animated”)){

　　// 如果当前没有进行动画，执行的代码

　　}

　　示例1：点击div,div向右下方移动，并变大，停止后，返回原位置

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>自定义动画效果</title>
        <script src='jquery-3.1.1.js'></script>
        <link rel="stylesheet" href="donghua.css">
</head>
<body>
        <div></div>
</body>
</html>
<script>
        $('div').click(function(){
                $(this).animate({
                        width:'500px',
                        height:'500px',
                        left:'300px',
                        top:'300px',
                },5000,function(){
                        $(this).animate({
                                width:'100px',
                                height:'100',
                                left:0,
                                top:0
                        })
                })
        })
</script>

　　示例2：点击开始按钮，div向右移动，开始按钮变为暂停，点击移动中的div停止一定，按钮变为开始。（自定义动画累加累减效果实现）

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="donghua.css">
        <script src='jquery-3.1.1.js'></script>
        <title>Document</title>
</head>
<body>
        <div></div>
        <input type="button" value="开始" >
</body>
</html>
<script>
        $(function(){
                        $('#btn').click(function(){
                                var $div = $('div');
                                if($div.is(":animated")){
                                        $div.stop();
                                        this.value = '开始';
                                }else{
                                        $('div').animate({left:'+=200px'},3000);
                                        this.value = '暂停';
                                }
                                
                        })
                })
</script>

　　　5、toggle()方法

　　　　切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

　　　 show()与hide()方法的简写形式

　　　示例：点击标签，div显示或隐藏

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="donghua.css">
        <script src='jquery-3.1.1.js'></script>
</head>
<body>
        <h3>点我</h3>
        <div>这是个有故事的div</div>
</body>
</html>
<script>
        $('h3').click(function(){
                $(this).next().toggle(3000);  //切换元素的可变状态
        })
</script>

　　 6、slideToggle()方法

　　slideUp和slideDown简写

　　slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

　　如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。　　　　

　 $(selector).toggle(speed,callback,switch)
speed 可选，规定元素从可见到隐藏的速度，默认0
          在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。如果设置此参数，则无法使用 switch 参数。

　　callback  可选。toggle 函数执行完之后，要执行的函数。

　　switch   可选，布尔值。规定 toggle 是否隐藏或显示所有被选元素。

　　示例：

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="donghua.css">
        <script src='jquery-3.1.1.js'></script>
</head>
<body>
        <h3>点我</h3>
        <div>这是一个有故事的div</div>
</body>
</html>
<script>
        $('h3').click(function(){
                $('div').slideToggle(3000); //切换元素可见状态
        })
</script>

　　　7. fadeTo()方法

　　fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

　　语法：

　　$(selector).fadeTo(speed,opacity,callback)
speed 可选。规定元素从当前透明度到指定透明度的速度。
opacity 必需。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
callback 可选。fadeTo 函数执行完之后，要执行的函数。

　　示例：　

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="donghua.css">
        <script src='jquery-3.1.1.js'></script>
</head>
<body>
        <h3>点我</h3>
        <div>这是一个有故事的div</div>
</body>
</html>
<script>
        $('h3').bind('click',function(){
                $(this).next().fadeTo(3000,0.3,function(){
                        $(this).css('border','3px dashed green');
                })
        })      
</script>

　　8、fadeToggle()方法

　　fadeToggle() 方法在fadeIn() 和fadeOut()方法之间切换。

　　如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。

　　如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

　　注释：隐藏的元素不会被完全显示（不再影响页面的布局）。

　　语法：

$(selector).fadeToggle(speed,easing,callback)
speed 可选。规定褪色效果的速度
easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。(可选"linear" - 匀速移动，"swing" - 在开头/结尾移动慢，在中间移动快)
callvack 可选，fadeToggle() 方法执行完之后，要执行的函数。

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="donghua.css">
        <script src='jquery-3.1.1.js'></script>
</head>
<body>
        <h3>点我</h3>
        <div>这是一个有故事的div</div>
</body>
</html>
<script>
        $('h3').click(function(){
                $(this).next().fadeToggle();
        })
</script>

　　二级菜单联动效果

<!DOCTYPE html>
<html >
<head>
        <meta charset="UTF-8">
        <title>二级菜单效果</title>
        <style>
                *{
                        margin: 0;
                        padding: 0;
                }
                ul{
                        list-style-type: none;
                }
                div{
                        width: 20%;
                        background-color: green;
                        position: relative;
                }
                .submenu{
                        display: none;
                }
                ul h3{
                        border: 1px solid red;
                }
        </style>

        <script src='jquery-3.1.1.js'></script>


</head>
<body>
        <div>
        <ul>
                <li>
                        <h3>美食</h3>
                        <ul class="submenu">
                                <li>地锅鸡</li>
                                <li>皮肚面</li>
                                <li>馒头</li>
                        </ul>
                </li>

                <li>
                        <h3>读书</h3>
                        <ul class="submenu">
                                <li>当代青年</li>
                                <li>皮囊</li>
                                <li>海子的诗</li>
                        </ul>
                </li>

                <li>
                        <h3>娱乐</h3>
                        <ul class="submenu">
                                <li>明星出轨</li>
                                <li>最新电影</li>
                                <li>杨幂离婚</li>
                        </ul>
                </li>
        </ul>
        </div>
        <input type="button" value="隐藏" >
</body>
</html>
<script>
        $('h3').hover(function(){
                $(this).css('background-color','red')
                $(this).next().show(2000);
        },function(){
                $(this).css('background-color','yellow')
                $(this).next().hide(2000);
        });
        var flag = true;
        var div_width = $('div').css('width');//获取div的宽度
        $('#btn').click(function(){
                if(flag){                         
                        //$('div').css('left','-'+div_width);
                        $('div').animate({left:'-'+div_width},3000);
                        this.value = '显示';
                }else{
                        $('div').animate({left:0},3000);
                        this.value = '隐藏'
                }
                flag = !flag;
                
        });
</script>

上一篇 »关于jquery所有动画都有速度和动画的方向，在宽度方向上的动画?
下一篇 »jQuery 动画

jQuery动画方法

一、.hover方法

二、动画方法

1.show()显示元素与hide()隐藏元素。

3.slideUp()和slideDown()滑动方法

4.animate(params,[speed],[callback])自定义动画方法

5、toggle()方法

6、slideToggle()方法

7. fadeTo()方法

8、fadeToggle()方法

相关推荐

Jquery基础之动画操作

JQuery效果-淡入淡出、滑动、动画

jQuery动画效果animate和scrollTop结合使用实例

jquery的动画函数animate，讲解一

JQuery动画animate的stop方法使用详解

jQuery 实现图片动画代码

jQuery 停止动画

JQuery学习笔记，4JQuery中的事件和动画

　　1.show()显示元素与hide()隐藏元素。

　　3.slideUp()和slideDown()滑动方法

　　4.animate(params,[speed],[callback])自定义动画方法　　

　　　5、toggle()方法

　　 6、slideToggle()方法

　　　7. fadeTo()方法

　　8、fadeToggle()方法