JQuery系列之事件切换
文章の目录
- 一、hover([over,]out)
- 1、概述
- 2、语法
- 3、参数
- 4、示例
- 二：toggle([speed],[easing],[fn])
- 1、概述
- 2、语法
- 3、参数
- 4、示例
- 写在最后
一、hover([over,]out)
1、概述
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件。
2、语法
selector.hover([over,]out);
3、参数
- over：鼠标移到元素上要触发的函数
- out：鼠标移出元素要触发的函数
4、示例
鼠标悬停的表格加上特定的类
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
hover()方法通过绑定变量"handlerInOut"来切换方法。
$("td").bind("mouseenter mouseleave", handlerInOut);
$("td").hover(handlerInOut);
二：toggle([speed],[easing],[fn])
1、概述
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
1.9版本 .toggle(function, function, … ) 方法删除，jQuery Migrate（迁移）插件可以恢复此功能。
2、语法
selector.toggle([speed], [easing], [fn]);
3、参数
- speed：三种预定速度之一的字符串(“slow”，“normal” or “fast”)或表示动画时长的毫秒数值(如：1000)；
- easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"；
- fn：在动画完成时执行的函数，每个元素执行一次；
- sw：用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素；
4、示例
对表格切换显示/隐藏
$("td").toggle();
用600毫秒的时间将段落缓慢的切换显示状态
$("p").toggle("slow");
用200毫秒将段落迅速切换显示状态，之后弹出一个对话框。
$("p").toggle("fast", function () {
alert("Animation Done.");
});
如果这个参数为true ，那么匹配的元素将显示;如果false，元素是隐藏的
$("#foo").toggle(showOrHide);
//相当于
if (showOrHide) {
$("#foo").show();
} else {
$("#foo").hide();
}
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！