Несколько Div Jquery Animated Hover

У меня есть несколько вложенных divs с различными статьями в них.Несколько Div Jquery Animated Hover

<div id="maindiv" onmouseover="showbuttons()" onmouseout="hidebuttons()"> 
    <div style="float: left"></div> 
    <div style="float: right"> 
     <div id="buttons"></div> 
    </div> 
</div> 

function show() { 
    $('#buttons').slideDown('fast') 
    //$('#buttons').stop().slideDown('fast') 

} 

function hide() { 
    $('#buttons').slideUp('fast') 
    //$('#buttons').stop().slideUp('fast') 

}

Проблема в том, я думаю, что событие парения увольняет пару раз, так что я держать имея кнопки исчезают и снова появляются. Поэтому я добавил stop() - Что прокомментировано в коде выше. Но тогда у меня есть кнопки наполовину через страницу (из-за отмененной анимации), когда у меня остается мышь.

Или, возможно, это способ сделать это в CSS?

источник

2012-05-17 Akshat

Hiya man кажется работающим здесь: http://jsfiddle.net/Zarhu/1/ let me kn если это поможет и хочу, чтобы я настроил ответ! B-) –

Кажется, что у вас такая же проблема, переместите мышь в div, но выключите и снова на кнопке div – Akshat

Удалите onmouseover и onmouseout атрибуты из div и заменить JavaScript с:

$('#maindiv').hover(
    function() { 
     $('#buttons').stop().slideDown('fast'); 
    }, 
    function() { 
     $('#buttons').stop().slideUp('fast'); 
    } 
);

источник

2012-05-17 07:18:46 scessor

«onmouseenter - это конкретный IE. Не работает в других браузерах, если вы не используете jQuery, который может имитировать это событие «. http://stackoverflow.com/a/1638929/246260 – dezso

Это работает именно так, как я хочу – Akshat

Я считаю, что вы должны сделать что-то вроде:

$('#maindiv').hover(function() { 
    $('#buttons').stop().slideDown('fast') 
}, function() { 
    $('#buttons').stop().slideUp('fast') 
})

Это чище и просто.

источник

2012-05-17 07:26:13 ubik

для начала,

show()

уже используется JQuery поэтому для здравомыслия избежать этого имени

удалить слушателя событий от того, рядный с разметкой ..

$("#maindiv").mouseover(function() { 
    $("#buttons").stop(true, true).slideUp(); 
    }); 

    $("#maindiv").mouseout(function() { 
    $("#buttons").stop(true, true).slideDown(); 
    });

взгляд в функция переключения тоже

источник

2012-05-17 07:31:00

Я использовал только шоу ради упрощенного примера кода, спасибо – Akshat

Несколько Div Jquery Animated Hover

ответ

Смежные вопросы