1

溶岩メニュースタイルのメニューを作成する必要がありますが、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);
4

0 に答える 0