JQuery hover toggle事件使用
2015-11-13 10:54
656 查看
JQuery hover toggle事件使用:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE html> <html> <head> <base href="<%=basePath%>"> <meta charset="UTF-8"> <title>b index</title> <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'> <style type="text/css"> .s1{ width: 100px; height: 100px; background-color: pink; } .s2{ width: 50px; height: 50px; background-color: green; } </style> </head> <body style="margin:1px;"> <div id="div001">div001</div> <div id='div002'>div002</div> <div id='div003'>div003</div> <div> <button id="btn001">click me to div003 toggle </button> <button id="btn002">click me to div003 toggle(fn1,fn2,fn3) </button> </div> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="b/js/bootstrap.js"></script> <script type="text/javascript" src="js/index038.js"></script> </body> </html>
$(function() { $('#div001').hover(div001in, div001out); // 这种情况下,mouseenter和mouseleave事件都是执行这个div001in函数; $('#div002').hover(div001in); $('#btn001').click(btn001Click); $('#btn002').click(btn002Click); }); function div001in(e) { $(this).addClass('s1'); console.log(e.target.id + "---" + e.type); } function div001out() { $(this).removeClass(); } function btn001Click() { $('#div003').toggle(); } function btn002Click() { // 只能传入一个函数,传入两个以上就会报错;可以使用'fast'参数,如果不使用,默认会是slow; // 当前效果是显示/隐藏之后执行function函数; $('#div003').toggle('fast', function() { console.log('fn1'); }); }
相关文章推荐
- jQuery的选择器中的通配符
- 用户名校验--【Jquery】
- jQuery 淡入淡出
- jQuery源码学习4——工具方法篇之CSS样式处理方法
- jquery 动态添加和删除 ul li列表
- jQuery EasyUI使用教程之创建可折叠面板
- jQuery.lazyload详解
- 关于jquery ajax 异步请求 中文乱码问题。
- 以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
- jquery $.ajax $.get $.post的区别
- Jquery promise实现一张一张加载图片
- jquery转盘抽奖功能实现
- jQuery css,position,offset,scrollTop,scrollLeft用法
- 用JQuery写拖拽的简单实例
- JQuery插件Mmenu使用入门
- jquery转盘抽奖功能实现
- Jquery promise实现一张一张加载图片
- 以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
- jquery动画效果学习笔记(8种效果)
- jquery实现九宫格大转盘抽奖