ajax hover,jQuery / 使用hover()和toggle()切换事件

切换事件

在jQuery中提供了hover()和toggle()这两个方法用于事件的切换。所谓的切换事件，就是有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。

hover()方法：

hover()方法的功能是当鼠标移到所选元素上时，执行方法中的第一个函数，鼠标移出时，执行方法中的第二个函数，实现事件的切换效果。

语法形式：$(selector).hover(over，out);

over参数为移到所选元素上触发的函数，out参数为移出元素时触发的函数。

toggle()方法：

toggle()方法toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

语法形式：$(selector).toggle(fun1(),fun2(),funN(),...)

注意：toggle()方法在1.9.0之后的版本是不支持的。

也可用于切换被选元素的 hide() 与 show() 方法。

语法形式：$(selector).toggle(speed,callback)

speed参数可选，作用是规定hide/show效果的速度；callback()参数可选，当toggle()方法完成是执行的函数。

示例如下：

$(function(){ // hover()方法的使用

$("div").hover(

function(){

$(this).append(":爆装备");

function(){

$("b").remove();

}

);

})

$(function(){//给div改变背景颜色

$("#btn").toggle(

function(){

$("div").css("background-color","green");

function(){

$("div").css("background-color","red");

function(){

$("div").css("background-color","yellow");

}

);

})

$(function(){//显示和隐藏div

$("#btn").click(function(){

$("div").toggle(1000);

});

})

...省略代码

切换事件

打土豪

鼠标移上去看看

任务：把上面jQuery中的操作分别在代码框中重现。

ajax hover,jQuery / 使用hover()和toggle()切换事件 - 汇智网相关推荐

ajax的get json数据格式,jQuery / 用getJSON()方法加载JSON格式数据 - 汇智网
加载JSON格式数据 jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据.获取服务器中的数组,并对获取的数据进行解析,显示在页面中. 语法:$.getJSON(url,[dat ...
html hide特效,jQuery / 动画与特效中的显示show和隐藏hide - 汇智网
显示和隐藏在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: hide()的语法形式:$(selector).hide(speed,callback); sho ...
jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
使用jQuery的hover事件在IE中不停闪动的解决方法
在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百 ...
hover图片显现遮罩点击切换图片
hover图片显现遮罩点击切换图片代码如下: html: <div class="box"><ul class="imgs">< ...
Jquery的hover事件
Jquery的hover事件:鼠标移入移出事件的结合跟这以下几个步骤了解jquery的hover事件: 先创建一个div用来绑定事件 <div id="box">he ...
jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法
jquery 列表hover效果 <ul class="list"><li class="item"><span>1< ...
隐藏导航条HTML,jQuery实现的导航条切换可显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: 导航条在项目中的应用 $(function(){ ...
用jQuery实现一些导航条切换，显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 源码下载地址代码如下: <!DOCTYPE html ...

ajax hover,jQuery / 使用hover()和toggle()切换事件 - 汇智网

切换事件

ajax hover,jQuery / 使用hover()和toggle()切换事件 - 汇智网相关推荐

最新文章

热门文章