CODEWITHSUNDEEP
jquerycompatibilitylavalamp
Xtatic Uforia
Xtatic Uforia

Reputation: 99

jQuery Compatibility issue

I am trying to use a little plugin for menu animation I found at http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

However, I want to use it with the latest version of jQuery. However, the animation doesn't work with the latest version. Can anyone please tell me why the following would work with jQuery 1.5 and below but now on the versions above it?

(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);

Upvotes: 2

Views: 841

Answers (3)

baberlicious
baberlicious

Reputation: 49

The problem is with the line:

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

Take out the second argument in the handler leaving:

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

The reason you would want to use mouseover instead of hover, is if you have submenu items. using hover has a bug that causes the underlining element to reset back to the first item when hovering over the submenu items

Upvotes: 0

Zappa
Zappa

Reputation: 485

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.

Upvotes: 1

James Montagne
James Montagne

Reputation: 78650

You could always just load both versions of jquery. Using noConflict, you can load 1.5 for the plugin but use 1.7 for your own uses.

Upvotes: 0

Related Questions