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

The animation works for me in IE8 and FF using the demo included in this zip file using jQuery 1.7.1. The only thing I had to change in the example file to get the links working was to comment out the return false in the click event as follows:

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

as this was preventing the actual links from working. Is this what your problem is? If not then perhaps there is some other error in your code as it seems to be working.

于 2012-01-23T02:11:01.110 回答
0

您总是可以只加载两个版本的 jquery。使用noConflict,您可以为插件加载 1.5,但将 1.7 用于您自己的用途。

于 2012-01-23T00:57:31.633 回答
0

问题出在这条线上:

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

取出处理程序中的第二个参数离开:

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

您想要使用鼠标悬停而不是悬停的原因是如果您有子菜单项。使用悬停有一个错误,当悬停在子菜单项上时,会导致下划线元素重置回第一项

于 2012-02-10T21:32:01.790 回答