show/hide Wiederholungen stoppen

[Paykoman]

Hallo Forum,

ich habe ein Menü gebaut.

Nun habe ich das Problem, das die Animationen sich bei zu schnellem bewegen durch die Menüs wieder holen, dieser Fehler tritt also sporadisch auf und je nachdem klappen sich 1 -2 Menus immer wieder auf und zu und dies würde ich gerne irgend wie stoppen

<script type="text/javascript">
	$('ul.sidrmenu li').hover(
	    function () {
	        showObj( $(this).children('ul') );
	    }, 
	    function () {
	        hideObj( $(this).children('ul') );
	    }
	);
	</script>

Das ist der zuständige Code-Abschnitt welcher dafür sorgt das die Untermenüs auftauchen und verschwinden, da gibt es doch sicher eine Möglichkeit die Wiederholungen zu stopen oder?
Wäre sehr Dankbar für eure Unterstützung.


MFG: Paykoman

 

[Quaese]

Hi,

zum einen würde ich die Events mouseenter und mouseout verwenden, da diese nur feuern, wenn die Maus in das Element hinein bzw. heraus bewegt wird.

Als nächstes musst du mit stop alle derzeit ausgeführten Animationen stoppen und solltest die noch offenen Elemente mit hide schliessen.

Beispiel:

$('ul.sidemenu li')
    .on('mouseenter', function () {
        $('ul.sidemenu li ul').stop(true, true);
        $('ul.sidemenu li ul').not($(this).children('ul')).hide(0);
        $(this).children('ul').fadeIn(800);
    })
    .on('mouseleave', function () {
        $(this).children('ul').fadeOut(800);
    });

Hier kannst du dir es online ansehen: http://jsfiddle.net/Quaese/23ES2/

Ciao
Quaese

 

[BoR]

$('ul.sidemenu ul').hide();

$('ul.sidemenu li').hover(function () 
{
    $('ul.sidemenu li ul').stop();
    $('ul.sidemenu li ul').not($(this).children('ul')).hide();
    $(this).children('ul').fadeIn(800);
},
function()
{                      
    $(this).children('ul').fadeOut(800);
});

Hover arbeitet letztendlich ja mit mouseenter und mouseleave. Von daher war der Ansatz gar nicht sooo falsch, aber das nur als Randnotiz.