小白读《锋利的jQuery（第二版）》学习笔记 第四章 jQuery中的事件和动画

其他 2019-02-27 20:37:06 阅读次数: 0

JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引起的事件来处理的。
jQuery不仅提供了更加优雅的事件处理方法，而且极大地增强了事件处理能力。

jQuery中的事件

  1. 加载DOM
    传统window.onload方法 ——> jQuery中$(document).ready()方法。
    $(document).ready()方法是事件函数模块中最重要的一个函数，可以极大地提高Web应用程序的响应速度。

两者的细微区别

  • 1.执行时机
    window.onload方法：网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行。
    $(document).ready()方法：通过此方法注册的事件处理程序，在DOM完全就绪就可以被调用。（关联文件不一定已经下载完毕。）

若使用$(document).ready()方法注册的事件执行时可能元素关联文件未下载完（如图片有关的高度和宽度），此时可以使用load()方法解决。

load()方法：会在元素的onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

  • 2.多次使用
    JavaScript的onload事件一次只能保持对一个函数的引用。
    示例代码：
function one() {
	alert("one");
}

function two() {
    alert("two");
}

window.onload = one;
window.onload = two;

在这里插入图片描述
要one()和two()顺序触发，需写成：

window.onload = function() {
    one();
    two();
}

在这里插入图片描述
在这里插入图片描述
这样存在的问题：
假如多个JavaScript文件都用了window.onload方法，则编写代码变得麻烦。

$(document).ready()方法优点：会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

示例代码：

$(document).ready(function() {
    one();
});

$(document).ready(function() {
    two();
});
  • 3.简写方式

①

$(function() {
	//编写代码
});

②

$().ready(function() {
		//编写代码
});
  1. 事件绑定
    bind()方法。
    格式：bind( type[ , data] , fn);
    3个参数：
  • 事件类型：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。
  • 可选，作为event.data属性值传递给事件对象的额外数据对象。
  • 用来绑定的处理函数。

示例：假设网页中有一个FAQ，单击“标题”链接将显示内容。

HTML：

<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库，
		它是一个由 John Resig 创建于2006年1月的开源项目。
		jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、
		操作DOM、处理事件、执行动画和开发Ajax。
		它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>

CSS：

* {
    margin:0;
    padding:0;
}	
body { 
    font-size: 13px; 
    line-height: 130%; 
    padding: 60px;
}
#panel { 
    width: 300px; 
    border: 1px solid #0050D0;
}
.head { 
    height:24px;
    line-height:24px;
    text-indent:10px;
    background: #96E555; 
    cursor: pointer;
    width:100%; 
}
.content { 
    padding: 10px; 
    text-indent:24px; 
    border-top: 1px solid #0050D0;
    display:block;
    display:none; 
}

在这里插入图片描述
jQuery代码：

$(function(){
    $("#panel h5.head").bind("click",function(){
		$(this).next().show();		//$(this).next(); 获取“内容”元素
	})
})

在这里插入图片描述
同ready()方法一样，bind()方法也可以多次调用。
this：引用的是携带相应行为的DOM元素。
$(this)：转换为jQuery对象。

对示例进行改进后jQuery代码：

$(function(){
    $("#panel h5.head").bind("click",function(){
	    var $content = $(this).next();
	    if($content.is(":visible")){
			$content.hide();
		}else{
			$content.show();
		}
	})
})

可以实现显示和隐藏。

还可以改变事件的类型，修改后的jQuery代码：

$(function(){
    $("#panel h5.head").bind("mouseover",function(){
	     $(this).next().show();
	}).bind("mouseout",function(){
	     $(this).next().hide();
	})
})

jQuery为常用的事件提供了简写绑定事件的方法
示例代码：

$(function(){
    $("#panel h5.head").mouseover(function(){
	    $(this).next().show();
	}).mouseout(function(){
	    $(this).next().hide();
	})
})

  1. 合成事件
    hover()方法和toggle()方法。
    hover语法格式：

    hover(enter, leave);

对上题示例利用mouseover和mouseout方法的改写：

$(function(){
    $("#panel h5.head").hover(function(){
	    $(this).next().show();
	},function(){
	    $(this).next().hide();   
	})
})

toggle语法格式：

toggle(fn1,fn2,······fnN);

对上题示例利用click()方法的改写：

$(function(){
    $("#panel h5.head").toggle(function(){
			$(this).next().show();
	},function(){
			$(this).next().hide();
	})
})

toggle()方法在jQuery中的一个重要作用：切换元素的可见状态。
示例代码：

$(function(){
    $("#panel h5.head").toggle(function(){
			$(this).next().toggle();
	},function(){
			$(this).next().toggle();
	})
})

示例再改进，显示时标题高亮。
CSS添加代码：

.highlight{ background:#FF3300; }

jQuery代码：

$(function(){
    $("#panel h5.head").toggle(function(){
			$(this).addClass("highlight");
			$(this).next().show();
	},function(){
			$(this).removeClass("highlight");
			$(this).next().hide();
	});
})

在这里插入图片描述
在这里插入图片描述

  1. 事件冒泡
    冒泡：事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>冒泡事件示例</title>
        <style type="text/css">
            * {
                margin:0;
                padding:0;
            }

            body { 
                font-size: 13px; 
                line-height: 130%; 
                padding: 60px; 
            }

            #content { 
                width: 220px; 
                border: 1px solid #0050D0;
                background: #96E555; 
            }

            span { 
                width: 200px; 
                margin: 10px; 
                background: #666666; 
                cursor: pointer;
                color:white;
                display:block;
            }

            p {
                width:200px;
                background:#888;
                color:white;
                height:16px;
            }
            
        </style>
    </head>
    <body>
        <div id="content">
            外层div元素
            <span>内层span元素</span>
            外层div元素
        </div>
        
        <div id="msg"></div>
        <script src="../scripts/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
            // 为span元素绑定click事件
            $('span').bind("click",function(){
                var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
                $('#msg').html(txt);
            });
            // 为div元素绑定click事件
            $('#content').bind("click",function(){
                var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
                $('#msg').html(txt);
            });
            // 为body元素绑定click事件
            $("body").bind("click",function(){
                var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
                $('#msg').html(txt);
            });
        })
        </script>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述
事件冒泡引发的问题
事件冒泡可能会引起预料之外的效果。

事件对象

IE-DOM和标准DOM实现事件对象的方法各不相同。
jQuery进行必要的扩展和封装。
在程序中使用事件对象非常简单，只需要为函数添加一个参数，一般为event。

$("element").bind("click",function(event) {		//event:事件对象
		//···
});

当单击“element”元素时，事件对象就被创建了。
这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

停止事件冒泡

stopPropagation()方法：阻止事件中其他对象的事件处理函数被执行。

$(function(){
   	// 为span元素绑定click事件
	$('span').bind("click",function(event){			//event：事件对象
		var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});
	// 为div元素绑定click事件
	$('#content').bind("click",function(event){				//event：事件对象
	    var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
		$('#msg').html(txt);
		event.stopPropagation();    //  阻止事件冒泡
	});
	// 为body元素绑定click事件
	$("body").bind("click",function(){
		var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
		$('#msg').html(txt);
	});
})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
阻止默认行为

preventDefault()方法。

示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test preventDefault</title>

    </head>
    <body>
        <form action="test.html">
            用户名：<input type="text" id="username" />
            <br/>
            <input type="submit" value="提交" id="sub"/>
        </form>
            
        <div id="msg"></div>
        <script src="../scripts/jquery.js"></script>
        <script>
            $(function(){
                $("#sub").bind("click",function(event){
                        var username = $("#username").val();  //获取元素的值
                        if(username==""){     //判断值是否为空
                            $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息
                            event.preventDefault();  //阻止默认行为 ( 表单提交 )
                        }
                })
            })
        </script>
    </body>
</html>

在这里插入图片描述
preventDefault()方法能阻止表单的提交行为。

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的一种简写方式。

return false;

事件捕获
事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。
以click事件为例：
前面那个例子绑定的click事件，首先会传递给<body>元素，然后传递给<div>元素，最后才传递给<span>元素。

并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过JavaScript来修复。jQuery不支持事件捕获。

若需要使用事件捕获，需要使用原生JavaScript。

  1. 事件对象的属性
    jQuery遵循W3C规范，对常用属性进行了封装。
  • （1）event.type：获取事件的类型。
$(function(){
	$("a").click(function(event) {
	  alert(event.type);//获取事件类型
	  return false;//阻止链接跳转
	});
})

在这里插入图片描述

  • （2）event.preventDefault()方法：阻止默认的事件行为。
  • （3）event.stopPropagation()方法：阻止事件的冒泡。
  • （4）event.target：获取到触发事件的元素。
$(function(){
	$("a[href='http://google.com']").click(function(event) {
	  var tg = event.target;  //获取事件对象
	  alert( tg.href ) ;
	  return false;//阻止链接跳转
	});
})

在这里插入图片描述

  • （5）event.relatedTarget：mouseover和mouseout事件的相关元素。
    相当于IE中的：
    mouseover：event.fromElement。
    mouseout：event.toElement。
  • （6）event.pageX和event.pageY：获取到光标相对于页面的x坐标和y坐标。
$(function(){
	$("a").click(function(event) {
	  alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标
	  return false;//阻止链接跳转
	});
})

在这里插入图片描述

  • （7）event.which：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。
$(function(){
	$("a").mousedown(function(e){
		alert(e.which)  // 1 = 鼠标左键 ; 2 = 鼠标中键; 3 = 鼠标右键
	    return false;//阻止链接跳转
	})
})

在这里插入图片描述

  • （8）event.metaKey：为键盘事件中获取<ctl>按键。
  1. 移除事件
    在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

示例：为一个button元素绑定多个相同的事件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>remove Event Demo</title>
    </head>
    <body>
        <button id="btn">点击我</button>
        <div id="test"></div>
        <script src="../scripts/jquery.js"></script>
        <script>
            $(function(){
                $('#btn').bind("click", function(){
                        $('#test').append("<p>我的绑定函数1</p>");
                }).bind("click", function(){
                        $('#test').append("<p>我的绑定函数2</p>");
                }).bind("click", function(){
                        $('#test').append("<p>我的绑定函数3</p>");
                });
            });
        </script>
    </body>
</html>

在这里插入图片描述
1.移除按钮元素上以前注册的事件
unbind()方法。
示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>remove Event Demo</title>
    </head>
    <body>
        <button id="btn">点击我</button>
        <div id="test"></div>
        <button id="delAll">删除所有事件</button>
        <script src="../scripts/jquery.js"></script>
        <script>
            $(function(){
                $('#btn').bind("click", function(){
                        $('#test').append("<p>我的绑定函数1</p>");
                }).bind("click", function(){
                        $('#test').append("<p>我的绑定函数2</p>");
                }).bind("click", function(){
                        $('#test').append("<p>我的绑定函数3</p>");
                });
                $('#delAll').click(function(){
			        $('#btn').unbind("click");
	            });
            });
        </script>
    </body>
</html>

在这里插入图片描述
unbind()方法的语法结构：

unbind([type],[data]);

（1）如果没有参数，则删除所有绑定的事件。
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件。
（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。

第（3）种情况示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>remove Event Demo</title>
    </head>
    <body>
        <button id="btn">点击我</button>
        <div id="test"></div>
        <button id="delTwo">删除第二个事件</button>
        <script src="../scripts/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
               $('#btn').bind("click", myFun1 = function(){
                             $('#test').append("<p>我的绑定函数1</p>");
                      }).bind("click", myFun2 = function(){
                             $('#test').append("<p>我的绑定函数2</p>");
                      }).bind("click", myFun3 = function(){
                               $('#test').append("<p>我的绑定函数3</p>");
                      });
               $('#delTwo').click(function(){
                      $('#btn').unbind("click",myFun2);
               });
            })
        </script>
    </body>
</html>

在这里插入图片描述

对于只需要触发一次，随后就要立即解除绑定的情况。
jQuery提供一个简写方法——one()方法。
one()方法的结构和使用方法和bind()方法相同。
示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>remove Event Demo</title>
    </head>
    <body>
        <button id="btn">点击我</button>
        <div id="test"></div>
        <script src="../scripts/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
               $('#btn').one("click", function(){
                             $('#test').append("<p>我的绑定函数1</p>");
                      }).one("click", function(){
                             $('#test').append("<p>我的绑定函数2</p>");
                      }).one("click", function(){
                               $('#test').append("<p>我的绑定函数3</p>");
                      });
            })
        </script>
    </body>
</html>

在这里插入图片描述
jQuery1.7版本中新增了on(),off(),delegate()和undelegate()事件绑定。

  1. 模拟操作
    通过模拟用户操作，来达到效果。

1.常用模拟
使用trigger()方法完成模拟操作。
示例：

$('#btn').trigger("click");

也可以直接用简化写法click()：

$('#btn').click();

2.触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。
示例：为元素绑定一个“myClick”的事件。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test trigger</title>
    </head>
    <body>
        <button id="btn">点击我</button>
        <div id="test"></div>
        <script src="../scripts/jquery.js"></script>
        <script>
            $(function(){
                $("#btn").bind("myClick", function(){
                    $("#test").append("<p>我的自定义事件.</p>");
                });
                $("#btn").trigger("myClick");
            })
        </script>
    </body>
</html>

在这里插入图片描述
3.传递数据
trigger(type,[data])方法有两个参数。
通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
示例：传递数据。

$(function(){
    $('#btn').bind("myClick", function(event, message1, message2){
        $('#test').append( "<p>"+message1 + message2 +"</p>");
    });
    $('#btn').trigger("myClick",["我的自定义","事件"]);
})

在这里插入图片描述
4.执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作。
不想执行浏览器默认操作——triggerHandler()方法。

  1. 其他用法

bind()方法更多用法：

1.绑定多个事件类型
示例：

$(function(){
     $("div").bind("mouseover mouseout", function(){
        $(this).toggleClass("over");
     });
  })

等同于

$(function() {
   $("div").bind("mouseover", function(){
        $(this).toggleClass("over");
     }).bind("mouseout", function(){
        $(this).toggleClass("over");
     });
  });

2.添加事件命名空间，便于管理

示例：把为元素绑定的多个事件类型用命名空间规范起来。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>测试命名空间</title>
    </head>
    <body>
        <div>test.</div>
        <button >根据命名空间，删除事件</button>
        <script src="../scripts/jquery.js"></script>
        <script>
            $(function(){
                $("div").bind("click.plugin",function(){
                    $("body").append("<p>click事件</p>");
                });
                $("div").bind("mouseover.plugin", function(){
                    $("body").append("<p>mouseover事件</p>");
                });
                $("div").bind("dblclick", function(){
                    $("body").append("<p>dblclick事件</p>");
                });
                $("button").click(function() {
                    $("div").unbind(".plugin");  
                    //等同于
                    // $("div").unbind("click").unbind("mousrover");
                })
                /*
                    click,mouseover 事件被删除，
                */
            })
        </script>
    </body>
</html>

在这里插入图片描述
3.相同事件名称，不同命名空间执行方法
示例：为元素绑定相同的事件类型，然后以命名空间的不同按需调用。

$(function(){
	$("div").bind("click",function(){
	       $("body").append("<p>click事件</p>");
	});
	$("div").bind("click.plugin", function(){
	       $("body").append("<p>click.plugin事件</p>");
	});
	$("button").click(function() {
		  $("div").trigger("click!");    // 注意click后面的感叹号
	});
  })

在这里插入图片描述
点击test触发两个事件
点击button触发一个事件。

!的作用：
匹配所有不包含在命名空间中的click方法。

两者都被触发：

$("div").trigger("click");    // 去掉感叹号

在这里插入图片描述

jQuery中的动画

动画效果也是jQuery库吸引人的地方。

show()方法和hide()方法

jQuery中最基本的动画方法。
hide()方法与css()方法把display样式改为"none"效果相同。
show()方法将display样式设置为先前的显示状态。

示例：

$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().hide();
	},function(){
	     $(this).next().show();
	})
})

在这里插入图片描述
在这里插入图片描述
hide()方法会做两步动作：
1.首先会记住“内容”的display属性的值。
2.把display属性的值设置为“none”。

用jQuery做动画效果要求要在标准模式下，否则可能会引起动画抖动。

show()方法和hide()方法让元素动起来
show()方法和hide()方法无传参时为立即执行显示和隐藏，可以传参改变速度。
关键词：slow、normal和fast。
可以为速度指定一个数字，单位是毫秒。
示例：

$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().hide(600);
	},function(){
	     $(this).next().show(600);
	})
})

同时修改元素的多个样式属性。

在这里插入图片描述

fadeIn()方法和fadeOut()方法

只改变元素的不透明度。
fadeOut()方法结束后元素display属性值为none。
示例：

$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().fadeOut();
	},function(){
	     $(this).next().fadeIn();
	})
})

在这里插入图片描述
在这里插入图片描述

slideUp()方法和slideDown()方法

只会改变元素的高度。
slideUp()方法：元素由下到上缩短隐藏。
slideDown()方法：元素由上到下延伸显示。

示例：

$(function(){
    $("#panel h5.head").toggle(function(){
	     $(this).next().slideUp();
	},function(){
	     $(this).next().slideDown();
	})
})

在这里插入图片描述
jQuery中任何动画效果，都可以指定3中速度参数：slow（0.6秒）、normal（0.4秒）和fast（0.2秒），都可以传数字作为时间参数。

自定义动画方法animate()

语法结构：

animate(params,speed,callback);

参数说明：

  1. params：一个包含样式属性及值的映射，比如{property1:“value1”,property2::“value2”,…}。
  2. speed：速度参数，可选。
  3. callback：在动画完成时执行的函数，可选。

1.自定义简单动画
通过animate()方法，能够实现精致新颖的动画效果。

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>jQuery 实现简单动画</title>
        <style>
            * {
                margin:0;
                padding:0;
            }	

            body { 
                padding: 60px; 
            }

            #panel {
                position: relative; 
                width: 100px; 
                height:100px;
                border: 1px solid #0050D0;
                background: #96E555; 
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="panel"></div>
        <script src="../scripts/jquery.js"></script>
        <script>
            $(function(){
                $("#panel").click(function(){
                $(this).animate({left: "500px"}, 3000);
                })
            })
        </script>
    </body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
2.累加、累减动画
上面例子中，把{left:“500px”}设置为{left:"+=500px"}
"+=“或者”-="符号即表示在当前位置累加或者累减。

3.多重动画
（1）同时执行多个动画
根据语法结构。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>jQuery 实现简单动画</title>
        <style>
            * {
                margin:0;
                padding:0;
            }	

            body { 
                padding: 60px; 
            }

            #panel {
                position: relative; 
                width: 100px; 
                height:100px;
                border: 1px solid #0050D0;
                background: #96E555; 
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="panel"></div>
        <script src="../scripts/jquery.js"></script>
        <script>
            $(function(){
                $("#panel").click(function(){
                    $(this).animate({left: "500px",height:"200px"}, 3000);
                })
            })
        </script>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
（2）按顺序执行多个动画
按顺序写

$("#panel").click(function(){
     $(this).animate({left: "500px"}, 3000)
		    .animate({height: "200px"}, 3000);
})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
4.综合动画
设置多个属性和多个动画。

$(function(){
    $("#panel").css("opacity", "0.5"); //设置不透明度
    $("#panel").click(function(){
          $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
	 .animate({top: "200px" , width :"200px"}, 3000 )
	 .fadeOut("slow");
    });
});

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

动画回调函数

若前面综合动画的例子中最后不是要fadeOut(“slow”)而是想改变CSS样式。
不可以用css()，因为css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数（callback）对非动画方法实现排队。

$(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .animate({top: "200px" , width :"200px"}, 3000 ,function(){
					     $(this).css("border","5px solid blue");
					 })
					 
        });

也可以用queue()方法

$(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .animate({top: "200px" , width :"200px"}, 3000 )
                     .queue(function(next){
                         $(this).css("border","5px solid blue");
                         next(); //继续下一个动画
                    })
                    .slideUp("slow");
					 
        });
    });

停止动画和判断是否处于动画状态

1.停止元素的动画

stop()方法。
语法结构：

stop([clearQueue],[gotoEnd]);

clearQueue：可选，Boolean值，是否清空未执行完的动画队列。
gotoEnd：可选，Boolean值，是否直接将正在执行的动画跳转到末状态。

示例：解决hover控制动画进行时鼠标进入与离开太快造成的问题。

$(function(){
	  $("#panel").hover(function() {
		  $(this).stop()
		  		 .animate({height : "150",width : "300"} , 200 );
	  },function() {
		  $(this).stop()
		  		 .animate({height : "22",width : "60" } , 300 );
	  });
});

在这里插入图片描述
如果遇到组合动画

$(function(){
	 $("#panel").hover(function() {
				$(this).stop()
					.animate({height : "150" } , 200 )

					//如果在此时触发了光标移除的事件
					//将执行下面的动画
					//而非光标移出事件中的动画
					.animate({width : "300" } , 300 )
	},function() {
				$(this).stop()
					.animate({height : "22" } , 200 )
					.animate({width : "60" } , 300 )
	});
});

此时只用一个不带参数的stop()方法无法解决问题。
height动画停止，width动画将会继续执行。

解决方法：利用stop()方法的第一个参数。

$(function(){
	 $("#panel").hover(function() {
				$(this).stop(true)
					.animate({height : "150" } , 200 )
					.animate({width : "300" } , 300 )
	},function() {
				$(this).stop(true)
					.animate({height : "22" } , 200 )
					.animate({width : "60" } , 300 )
	});
});

完美解决。

注意：jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法。

示例：

$("div.content")
	.animate({width:"300"},200)
	.animate({height:"150"},300)
	.animate({opacity:"0.2"},2000);

无论怎么设置stop()方法，均无法在改变“width”或者“height”时，将此<div>元素的末状态变成300 x 150的大小，并且设置透明度为0.2。

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

$(element).is(":animated");

3.延迟动画
delay()方法。
参数：数字，单位毫秒。
delay()方法允许我们将队列中的函数延时执行。
它既可以推迟动画队列中函数的执行，也可以用于自定义队列。

其他动画方法

4个专门用于交互的动画方法。

  1. toggle()方法：切换元素的可见状态。

    toggle(speed,[callback]);

  2. slideToggle()方法：通过高度变化来切换匹配元素的可见性。

    slideToggle(speed,[easing],[callback]);

  3. fadeTo()方法：把元素的不透明度以渐变方式调整到指定值。

    fadeTo(speed,opacity,[callback]);

  4. fadeToggle()方法：通过不透明度变化来切换匹配元素的可见性。

    fadeToggle(speed,[easing],[callback]);

视频展示效果案例

HTML：

<div class="v_show">
	<div class="v_caption">
		<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
		<div class="highlight_tip">
			<span class="current">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
		</div>
		<div class="change_btn">
			<span class="prev" >上一页</span>
			<span class="next">下一页</span>
		</div>
		<em>
			<a href="#">更多>></a>
		</em>
	</div>
	<div class="v_content">
		<div  class="v_content_list">
			<ul>
				<li>
					<a href="#">
						<img src="img/01.jpg" alt="海贼王" />
					</a>
					<h4>
						<a href="#">海贼王</a>
					</h4>
					<span>播放:
						<em>28,276</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/01.jpg" alt="海贼王" />
					</a>
					<h4>
						<a href="#">海贼王</a>
					</h4>
					<span>播放:
						<em>28,276</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/01.jpg" alt="海贼王" />
					</a>
					<h4>
						<a href="#">海贼王</a>
					</h4>
					<span>播放:
						<em>28,276</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/01.jpg" alt="海贼王" />
					</a>
					<h4>
						<a href="#">海贼王</a>
					</h4>
					<span>播放:
						<em>28,276</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/02.jpg" alt="哆啦A梦" />
					</a>
					<h4>
						<a href="#">哆啦A梦</a>
					</h4>
					<span>播放:
						<em>33,326</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/02.jpg" alt="哆啦A梦" />
					</a>
					<h4>
						<a href="#">哆啦A梦</a>
					</h4>
					<span>播放:
						<em>33,326</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/02.jpg" alt="哆啦A梦" />
					</a>
					<h4>
						<a href="#">哆啦A梦</a>
					</h4>
					<span>播放:
						<em>33,326</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/02.jpg" alt="哆啦A梦" />
					</a>
					<h4>
						<a href="#">哆啦A梦</a>
					</h4>
					<span>播放:
						<em>33,326</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/03.jpg" alt="火影忍者" />
					</a>
					<h4>
						<a href="#">火影忍者</a>
					</h4>
					<span>播放:
						<em>28,276</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/03.jpg" alt="火影忍者" />
					</a>
					<h4>
						<a href="#">火影忍者</a>
					</h4>
					<span>播放:
						<em>28,276</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/03.jpg" alt="火影忍者" />
					</a>
					<h4>
						<a href="#">火影忍者</a>
					</h4>
					<span>播放:
						<em>28,276</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/03.jpg" alt="火影忍者" />
					</a>
					<h4>
						<a href="#">火影忍者</a>
					</h4>
					<span>播放:
						<em>28,276</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/04.jpg" alt="龙珠" />
					</a>
					<h4>
						<a href="#">龙珠</a>
					</h4>
					<span>播放 
						<em>57,865</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/04.jpg" alt="龙珠" />
					</a>
					<h4>
						<a href="#">龙珠</a>
					</h4>
					<span>播放 
						<em>57,865</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/04.jpg" alt="龙珠" />
					</a>
					<h4>
						<a href="#">龙珠</a>
					</h4>
					<span>播放 
						<em>57,865</em>
					</span>
				</li>
				<li>
					<a href="#">
						<img src="img/04.jpg" alt="龙珠" />
					</a>
					<h4>
						<a href="#">龙珠</a>
					</h4>
					<span>播放 
						<em>57,865</em>
					</span>
				</li>
		     </ul>
		</div>
	</div>
</div>

CSS：

* { 
    margin:0; 
    padding:0; 
    word-break:break-all; 
}

body { 
    background:#FFF; 
    color:#333; 
    font:12px/1.5em Helvetica, Arial, sans-serif; 
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-size:1em; 
}

a { 
    color:#2B93D2; 
    text-decoration:none; 
}

a:hover { 
    color:#E31E1C; 
    text-decoration:underline; 
}

ul, 
li { 
    list-style:none; 
}

fieldset, 
img { 
    border:none; 
}

/* v_show style */

.v_show { 
    width:595px; 
    margin:20px 0 1px 60px; 
}

.v_caption { 
    height:35px; 
    overflow:hidden; 
    background:url(img/btn_cartoon.gif) no-repeat 0 0; 
}

.v_caption h2 { 
    float:left; 
    width:84px; 
    height:35px; 
    overflow:hidden; 
    background:url(img/btn_cartoon.gif) no-repeat; 
    text-indent:-9999px; 
}

.v_caption .cartoon { 
    background-position: 0 -100px; 
}

.v_caption .variety { 
    background-position:-100px -100px; 
}

.highlight_tip { 
    display:inline; 
    float:left; 
    margin:14px 0 0 10px; 
}

.highlight_tip span { 
    display:inline; 
    float:left; 
    width:7px; 
    height:7px; 
    overflow:hidden; 
    margin:0 2px; 
    background:url(img/btn_cartoon.gif) no-repeat 0 -320px; 
    text-indent:-9999px; 
}

.highlight_tip .current { 
    background-position:0 -220px; 
}

.change_btn { 
    float:left; 
    margin:7px 0 0 10px; 
}

.change_btn span { 
    display:block; 
    float:left; 
    width:30px; 
    height:23px; 
    overflow:hidden; 
    background:url(img/btn_cartoon.gif) no-repeat; 
    text-indent:-9999px; 
    cursor:pointer; 
}

.change_btn .prev { 
    background-position:0 -400px;  
}

.change_btn .next { 
    width:31px; 
    background-position:-30px -400px; 
}

.v_caption em { 
    display:inline; 
    float:right; 
    margin:10px 12px 0 0; 
    font-family:simsun; 
}

.v_content { 
    position:relative; 
    width:592px; 
    height:160px; 
    overflow:hidden; 
    border-right:1px solid #E7E7E7; 
    border-bottom:1px solid #E7E7E7; 
    border-left:1px solid #E7E7E7; 
}

.v_content_list { 
    position:absolute; 
    width:2500px;
    top:0px; 
    left:0px; 
}

.v_content ul {
    float:left;
}

.v_content ul li { 
    display:inline; 
    float:left; 
    margin:10px 2px 0; 
    padding:8px; 
    background:url(img/v_bg.gif) no-repeat; 
}

.v_content ul li a { 
    display:block; 
    width:128px; 
    height:80px; 
    overflow:hidden; 
}

.v_content ul li img {  
    width:128px; 
    height:96px; 
}

.v_content ul li h4 { 
    width:128px; 
    height:18px; 
    overflow:hidden; 
    margin-top:12px; 
    font-weight:normal; 
}

.v_content ul li h4 a { 
    display:inline !important; 
    height:auto !important; 
}

.v_content ul li span { 
    color:#666; 
}

.v_content ul li em { 
    color:#888; 
    font-family:Verdana; 
    font-size:0.9em; 
}

jQuery：

$(function(){
    var page = 1;
    var i = 4; //每版放4个图片
    //向后 按钮
    $("span.next").click(function(){    //绑定click事件
	     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
		 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
		 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
		 var v_width = $v_content.width() ;
		 var len = $v_show.find("li").length;
		 var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
		 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
			  if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
				$v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
				page = 1;
			  }else{
				$v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
				page++;
			 }
			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
		 }
   });
    //往前 按钮
    $("span.prev").click(function(){
	     var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
		 var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
		 var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
		 var v_width = $v_content.width();
		 var len = $v_show.find("li").length;
		 var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
		 if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
		 	 if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
				$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
				page = page_count;
			}else{
				$v_show.animate({ left : '+='+v_width }, "slow");
				page--;
			}
			$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
		}
    });
});

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/canxuezhang/article/details/86700001
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022