Loading

JQuery hover toggle事件使用

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');
    });
}

 

posted @ 2015-11-13 10:54  stono  阅读(313)  评论(0)  编辑  收藏  举报