Div Расширение и сжатие при наведении курсора?

Я делаю выпадающее меню с эффектом анимации jquery,

var mexpand = false;
function toggleMenu() {
    if (!mexpand) {
        $('jQuery selector').css({ "background": "url('Images/bnbgmenu.jpg') repeat-x top left" });
        $("#NavDiv").animate({ height: "200px" });
        mexpand = true;
    }
    else {
        $("#NavDiv").animate({ height: "35px" });
        $('jQuery selector').css({ "background": "url('Images/bnbguser.jpg') repeat-x top left" });
        mexpand = false;
    }
}

Пожалуйста, взгляните на этот jsfiddle

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

но я сталкиваюсь с проблемами с наведением мыши и выходом из мыши, которые вы можете увидеть в скрипке.

Спасибо


javascript html jquery onmouseover onmouseout
person Fahad Hussain    schedule 02.10.2014    source источник
comment
Возможно, вы захотите удалить из скрипки весь этот несвязанный код, например myVar = setInterval(function()..., который, кажется, вообще не выполняет никакой функции.   -  person leo    schedule 02.10.2014
comment
Я думаю, ваша жизнь была бы проще, если бы вы использовали функции showMenu и hideMenu вместо toggleMenu, так как они все равно вызываются в разных местах. И начните с простого примера, и убедитесь, что вы его понимаете. You Fiddle содержит много ненужных вещей, которые могут вас сбить с толку.   -  person leo    schedule 02.10.2014

Ответы (2)


arrow_upward
1
arrow_downward

Вместо вызова функции вы можете установить функциональность с помощью jQuery. Дайте вашему изображению значка класс icon, а затем используйте следующий jQuery.

$( ".icon" )
    .mouseenter(function() {
        $("#NavDiv").animate({ height: "200px" });
    }
);
$("#NavDiv")  
    .mouseleave(function() {
        $(this).animate({ height: "35px" });
    }
);

См. http://jsfiddle.net/hp4jh9f7/4/.

person TeeDeJee    schedule 02.10.2014

arrow_upward
0
arrow_downward

Вы должны использовать события onmouseenter и onmouseleave вместо onmouseover и onmouseout соответственно.

см. этот скрипач http://jsfiddle.net/hp4jh9f7/2/

person Gowsikan    schedule 02.10.2014