2

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/で見つけたメニュー アニメーション用の小さなプラグインを使用しようとしています。

ただし、最新バージョンのjQueryで使用したいです。ただし、アニメーションは最新バージョンでは機能しません。以下がjQuery 1.5以下で機能するのに、それ以上のバージョンで機能する理由を誰か教えてください。

(function ($) {
    $.fn.lavaLamp = function (o) {
        o = $.extend({
            fx: "linear",
            speed: 500,
            click: function () {}
        }, o || {});
        return this.each(function () {
            var b = $(this),
                noop = function () {},
                $back = $('<li class="back"></li>').appendTo(b),
                $li = $("li", this),
                curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
            $li.not(".back").mouseover(function () {
                move(this)
            }, noop);
            $(this).hover(noop, function () {
                move(curr)
            });
            setCurr(curr);

            function setCurr(a) {
                $back.css({
                    "left": a.offsetLeft + "px",
                    "width": a.offsetWidth + "px"
                });
                curr = a
            };

            function move(a) {
                $back.each(function () {
                    $.dequeue(this, "fx")
                }).animate({
                    width: a.offsetWidth,
                    left: a.offsetLeft
                }, o.speed, o.fx)
            }
        })
    }
})(jQuery);
4

3 に答える 3

1

アニメーションは、 jQuery 1.7.1 を使用したこの zip ファイルに含まれているデモを使用して、IE8 および FF で動作します。リンクを機能させるためにサンプル ファイルで変更しなければならなかった唯一のことは、次のようにクリック イベントの return false をコメント アウトすることでした。

$(function() {
    $("#1, #2, #3").lavaLamp({
        fx: "backout",
        speed: 700,
        click: function(event, menuItem) {
            //return false;
        }
    });
});

これにより、実際のリンクが機能しなくなったためです。これはあなたの問題ですか？そうでない場合は、コードが機能しているように見えるため、コードに他のエラーがある可能性があります。

于 2012-01-23T02:11:01.110 に答える
0

問題は次の行にあります。

$li.not(".back").mouseover(function(){move(this)}, noop);

ハンドラーの2番目の引数を取り出します。

$li.not(".back").mouseover(function(){move(this)});

ホバーの代わりにマウスオーバーを使用する理由は、サブメニュー項目がある場合です。ホバーを使用すると、サブメニュー項目にカーソルを合わせると、下線要素が最初の項目にリセットされるバグがあります。

于 2012-02-10T21:32:01.790 に答える
0

jquery の両方のバージョンをいつでもロードできます。noConflictを使用すると、プラグイン用に 1.5 をロードできますが、独自の用途には 1.7 を使用できます。

于 2012-01-23T00:57:31.633 に答える