Question

我正在尝试使用一个小插件来查找我在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);

Answer 1

动画适用于IE8和FF，使用jQuery 1.7.1中的this zip file中包含的演示。我必须在示例文件中更改以使链接工作的唯一方法是在click事件中注释掉return false，如下所示：

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

因为这阻止了实际的链接工作。这是你的问题吗？如果没有，则可能在您的代码中存在其他错误，因为它似乎正在起作用。

Answer 2

您可以随时加载两个版本的jquery。使用noConflict，您可以为插件加载1.5，但使用1.7用于您自己的用途。

Answer 3

问题出在以下几行：

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

取出处理程序中的第二个参数：

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

您希望使用鼠标悬停而不是悬停的原因是您有子菜单项。使用悬停时有一个错误，导致下划线元素在将鼠标悬停在子菜单项上时重置回第一个项目

jQuery兼容性问题

3 个答案: