jQuery FadeTo на двух элементах, вызывающих один div - PullRequest
Новая
       32

jQuery FadeTo на двух элементах, вызывающих один div

0 голосов
/ 08 июня 2011

У меня, вероятно, простой вопрос: / код: http://jsfiddle.net/FZufj/8/ /

У меня есть простой код для исчезающего меню.

Я хочу, чтобы меню исчезло после мышии в меню, и в «кнопке меню». Это не сложно, но я понятия не имею, как отключить эффект исчезновения, когда мышь перемещается из меню в кнопку меню.

Я хочу, чтобы меню исчезало после того, как мышьперешел из меню.

Надеюсь, вы понимаете, что я настоящий нуби в jQuery.

спасибо

Ответы [ 2 ]

0 голосов
/ 08 июня 2011

Демо: http://jsfiddle.net/wdm954/FZufj/20/

Я думаю, вы поступаете неправильно.Если вы сгруппируете кнопку меню и пункты меню в один и тот же элемент, наведение будет применено к обоим элементам.Здесь используется span для кнопки и вложенный ul для раскрывающегося меню. 

<div class="topbar">
    <ul class="menu">
        <li>
            <span>Option 1</span>
            <ul class="sub">
                <li>Sub Menu 1</li>
                <li>Sub Menu 2</li>
                <li>Sub Menu 3</li>
            </ul>
        </li>
    </ul>
</div>

Наведение применяется к элементу списка упаковки и наследуется дочерними элементами. 

$('.menu > li').hover(function() {
    $(this).children('.sub').fadeIn();
}, function() {
    $(this).children('.sub').fadeOut();
});
0 голосов
/ 08 июня 2011

Вы должны использовать .stop (true, false), чтобы остановить текущую анимацию.

Вот рабочая версия кода.(убрал двойной код с помощью 1 селектора, чтобы выбрать .menu и .button 

$(document).ready(function() { // This sets the opacity of the thumbs to fade down to 60% when the page loads
    $(".menu").fadeTo(600, 0.01);

    $(".menu, .button").hover(function() {
        $(".menu").stop(true,false).fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
    },  function() {
        $(".menu").stop(true,false).fadeTo("slow", 0.01); // This sets the opacity back to 60% on mouseout
    });
});

Я также обновил ваш пример здесь: http://jsfiddle.net/FZufj/19/

...