several jquery lavalamp menus on one page

I am using several of those jquery lavalamp menus http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=16

on one single page that uses vertical eased scrolling. So everytime i scroll to my next anchor there is a new lavalamp menu with another initial status of a "li" with the class "current".

for example, first div-box #content1 contains this:

    <ul class="lava">
    <li class="current"><a href="#content1">Apples</a></li>
    <li><a href="#content2">Pears</a></li>
    <li><a href="#content3">Oranges</a></li>        
    </ul>

And in the div #content 2 on the same page I would have

    <ul class="lava">
    <li><a href="#content1">Apples</a></li>
    <li class="current"><a href="#content2">Pears</a></li>
    <li><a href="#content3">Oranges</a></li>        
    </ul>

This method works fine once I click link by link in chronological order. But when I click back and forth it messes up the hover statu开发者_如何学Gos of the lava lamp menu that is initially set by the "li" class "current".

For example: clicking the link #content2 on menu one works and the hover status of the target menu two is fine, but when on that second menu I click back to #content1 the hover background of my lavalamp menu one is on the second link instead of the first - although the other css styles (such as bold text) are still on the right link that is set to "current". It's just the piece of "lava" that floats to the wrong place.

I hope what I try to explain is understandable. Does anyone know how to avoid this conflict with several menus on one page?

Thank you!

<ul class="lava">
 <li class="current"><a href="#content1">Apples</a></li>
 <li><a href="#content2">Pears</a></li>
 <li><a href="#content3">Oranges</a></li>        
</ul>

And in the div #content 2 on the same page I would have

<ul class="lava2">
<li><a href="#content1">Apples</a></li>
<li class="current"><a href="#content2">Pears</a></li>
<li><a href="#content3">Oranges</a></li>        
</ul>

and somewhere, write something like

<script type="text/javascript">
    $(function() { $(".lava").lavaLamp({ fx: "backout", speed: 700 })});
    $(function() { $(".lava2").lavaLamp({ fx: "backout", speed: 700 })});
</script>

SEPARATALLY

I found out the trick myself:

$j(function(){
    $j('.lava').lavaLamp({
        fx: 'easeOutBack',
        speed: 800,
        returnDelay: 500,
        returnHome: true,
        autoReturn: false,
        setOnClick: false
    });
});

is what i used but then instead of class "current" which didn't properly work I used "selectedLava" as suggested in these examples

http://nixboxdesigns.com/projects/jquery-lavalamp/#options