JavaScriptのjQueryのサンプルに機能を追加したいです!
当方jQuery初心者です。
jQueryのサンプル「Dropline Menu 7」を使っています。
現在地となるcurrentがデフォ表示で赤字にて表示されていると思います。
その他メニューをマウスオーバーすると他メニューのサブメニューが下に表示されていきます。
しかし、マウスアウトすると直ぐデフォ表示に戻ってしまいます。
そこにマウスオーバー時に現われていたサブメニューがマウスアウトしてもすぐ消えない、2~3秒程の時間表示されるようなものを設け、
その設定した時間内にマウスオーバーするとそのまま表示を継続、というような機能をこのスクリプトに追加したいです。
http://jsajax.com/jQueryDroplineMenuArticle1167.aspx
いろいろと調べてみたのですがいい方法が見つかりません。
使われている JScript.js の中身はこのようになっていました。
/* ======================================================
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
========================================================= */
$(function() {
$("#dropline li.current").children("ul").css("left", "0px").show();
$("#dropline li.current").children(":first-child").css("color", "#c00")
$("#dropline li").hover(function() {
if (this.className.indexOf("current") == -1) {
getCurrent = $(this).parent().children("li.current:eq(0)");
if (this.className.indexOf("top") != -1) {
$(this).children("a:eq(0)").css("color", "#069");
}
else {
$(this).children("a:eq(0)").css("color", "#000");
}
if (getCurrent = 1) {
$(this).parent().children("li.current:eq(0)").children("ul").hide(); ;
}
$(this).children("ul:eq(0)").css("left", "0px").show();
}
}, function() {
if (this.className.indexOf("current") == -1) {
getCurrent = $(this).parent().children("li.current:eq(0)");
if (this.className.indexOf("top") != -1) {
$(this).children("a:eq(0)").css("color", "#000");
}
else {
$(this).children("a:eq(0)").css("color", "#666");
}
if (getCurrent = 1) {
$(this).parent().children("li.current:eq(0)").children("ul").show(); ;
}
$(this).children("ul:eq(0)").css("left", "-99999px").hide();
}
});
});
イベントのhover(over, out)で、out部のfunction() {~} の処理内にて変更・追加すればよいのでしょうか?
どなたかご教授いただけますでしょうか、お願いします!