Несколько меню jquery lavalamp на одной странице

Я использую несколько из этих меню jquery lavalamp http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=16

на одной странице, которая использует вертикальную облегченную прокрутку. Поэтому каждый раз, когда я прокручиваю до своего следующего якоря, появляется новое меню lavalamp с другим начальным статусом "li" с классом "current".

например, первый div-box #content1 содержит это:

    <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>

И в div #content 2 на той же странице я бы

    <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>

Этот метод работает хорошо, когда я нажимаю ссылку за ссылкой в ​​хронологическом порядке. Но когда я нажимаю взад и вперед, это портит состояние наведения в меню лампы лавы, которое изначально устанавливается классом "li" current ".

Например: нажатие на ссылку # content2 в первом меню работает, и состояние наведения целевого меню 2 хорошо, но когда в этом втором меню я возвращаюсь к # content1, фон всплывающего меню моего первого меню lavalamp вместо этого находится на второй ссылке. первого - хотя другие стили CSS (например, полужирный текст) по-прежнему находятся на правой ссылке, которая установлена ​​на "текущий". Это просто кусок "лавы", который плывет не туда.

Я надеюсь, что то, что я пытаюсь объяснить, понятно. Кто-нибудь знает, как избежать этого конфликта с несколькими меню на одной странице?

Спасибо!

Источник

2 ответа 

<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>

И в div #content 2 на той же странице я бы

<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>

и где-то напиши что-то вроде

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

SEPARATALLY

Источник

Я сам узнал об этом:

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

это то, что я использовал, но затем вместо класса "current", который не работал должным образом, я использовал "selectedLava", как предложено в этих примерах

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

Источник
Другие вопросы по тегам