溶岩メニュースタイルのメニューを作成する必要がありますが、nettuts +に表示されるブロブの代わりに、カーソルが<li>
要素の上にあるときに水平方向に移動する(アニメーション化される)カスタムポインターを取得しようとしています。
<li>
リストの最後にあるポインターを取得できません。
また、単一のページのみを使用し、異なるページに別々のページを用意する代わりに、Jquery ajaxを使用してコンテンツを動的に変更した場合でも、ポインターは機能します<li>
か?
//lava menu nav
(function($){
$.fn.lava= function(options){
options= $.extend({
speed: 500,
easing: 'easeInOut',
reset: 0
}, options);
return this.each(function(){
var nav = $(this),
currentPageItem = ("#selected", nav),
pointer,
reset;
var itemPosition= currentPageItem.position().left;
var lavaOffset= currentPageItem.outerWidth() / 2;
$('<li><img id="pointer" src="images/lava.png"></li>').css({
left: itemPosition+lavaOffset
}).appendTo(this);
pointer= ("#pointer", nav) <!--declare the pointer variable-->
<!--listen for the hover event-->
$("li:not(#pointer)", nav).hover(function(){
clearTimeout(reset);
var newItemPosition= $(this).position().left;
var newLavaOffset= $(this).outerWidth() / 2;
<!--when the mouse hovers-->
pointer.animate(
{
left: newItemPosition + newLavaOffset
},
{
duration: options.speed,
easing: options.easing,
queue: false
}
);
}, function(){
<!-- now the mouse is leaving.. so we are using a callback for removing the animated pointer-->
reset= setTimeout(function(){
pointer.animate({
left: itemPosition+lavaOffset
}, options.reset)
}, options.reset);
});
}); <!--end each here-->
};<!--end prototype function here-->
})(jQuery);