$("#demo1 li").hover(makeTall, makeShort)
$("#demo2 li").hoverIntent(makeTall, makeShort)
var config = { sensitivity: 3, // number = sensitivity threshold (must be 1 or higher) interval: 200, // number = milliseconds for onMouseOver polling interval over: makeTall, // function = onMouseOver callback (必須) timeout: 500, // number = milliseconds delay before onMouseOut out: makeShort // function = onMouseOut callback (必須) }; $("#demo3 li").hoverIntent(config);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery Spoilers plugin | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="/content/lib/jquery/jquery.hoverIntent.js"></script> <script type="text/javascript"> $(function(){ $("#demo1 li").hover(makeTall,makeShort); $("#demo2 li").hoverIntent(makeTall,makeShort); $("#demo3 li").hoverIntent({ sensitivity: 3, interval: 200, over: makeTall, timeout: 500, out: makeShort }); }); function makeTall(){ $(this).animate({"height":75},200);} function makeShort(){ $(this).animate({"height":50},200);} </script> <!-- CSS --> <style type="text/css"> #demo { width:600px; } ul.demo {display:block; width:100%; height:75px; padding:0; margin:0; background:#9cc; list-style-type:none;} ul.demo li {background:#fcc; display:block; width:25%; height:50px; padding:0; margin:0; float: left; position:relative; overflow:hidden; cursor:default; font-size:0.9em; line-height:1.1em; text-align:center;} ul.demo li.p2 {background:#ffc;} ul.demo li.p3 {background:#cfc;} ul.demo li.p4 {background:#ccf;} ul.demo li span { display:block; margin:4px; background:#eef; cursor:default;} </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1><a href='http://cherne.net/brian/resources/jquery.hoverIntent.html'>hoverIntent jQuery Plug-in</a> | 設置サンプル</h1> <!-- CODE --> <div id="demo"> <h2>jQueryのhoverイベントの場合</h2> <pre>$("#demo1 li").hover(makeTall, makeShort)</pre> <ul class="demo" id="demo1"> <li class="p1">マウスオーバーしてください</li> <li class="p2">マウスオーバーしてください</li> <li class="p3">マウスオーバーしてください</li> <li class="p4"><span>hover ignores over/out events from children</span></li> </ul> <h2>hoverイベントをhoverIntentで置換した場合</h2> <pre>$("#demo2 li").hoverIntent(makeTall, makeShort)</pre> <ul class="demo" id="demo2"> <li class="p1">マウスオーバーしてください</li> <li class="p2">マウスオーバーしてください</li> <li class="p3">マウスオーバーしてください</li> <li class="p4"><span>hoverIntent also ignores over/out events from children</span></li> </ul> <h2>hoverイベントをhoverIntentで置換した場合(オプション指定)</h2> <pre>var config = { sensitivity: 3, <span class='green'>// number = sensitivity threshold (must be 1 or higher)</span> interval: 200, <span class='green'>// number = milliseconds for onMouseOver polling interval</span> over: makeTall, <span class='green'>// function = onMouseOver callback (必須)</span> timeout: 500, <span class='green'>// number = milliseconds delay before onMouseOut</span> out: makeShort <span class='green'>// function = onMouseOut callback (必須)</span> }; $("#demo3 li").hoverIntent(config);</pre> <ul class="demo" id="demo3"> <li class="p1">マウスオーバーしてください</li> <li class="p2">マウスオーバーしてください</li> <li class="p3">マウスオーバーしてください</li> <li class="p4">マウスオーバーしてください</li> </ul> </div> <!-- / CODE --> </div> </body> </html>