2

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);
Bojangles
  • 99,427
  • 50
  • 170
  • 208
Xtatic Uforia
  • 99
  • 1
  • 1
  • 7

3 Answers3

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.

Zappa
  • 453
  • 1
  • 5
  • 14
  • All I had to do was to change mouseover to hover. It solved the problem but Now when I hover over the dropdown menu it doesn't work. – Xtatic Uforia Jan 23 '12 at 22:07
  • Can you give us a sample of your code and css? As in the code you are using to apply the plugin. The code you provided in the original post was for the actual plugin. I think there may be something wrong with either your css or call to the plugin as the example mentioned in my answer works perfectly. – Zappa Jan 24 '12 at 07:43
0

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.

James Montagne
  • 77,516
  • 14
  • 110
  • 130
0

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

baberlicious
  • 49
  • 5