Avatar billede esbenn Nybegynder
25. oktober 2011 - 19:06 Der er 1 kommentar og
1 løsning

Jquery hoverin og hoverout

Hej,

Jeg er lige begyndt at arbejde lidt med jquery og har lige nu lavet en lille hover ting på en menu som egentligt virker fint... Men når jeg hover et punkt og min undermenu kommer frem og musen lige smutter fra undermenuen et øjeblik fader den væk og kommer så frem med det samme igen bag efter... Det kan altså så gøre at den kan stå og "blinke" noget tid hvis musen smutter væk fra den et par gange... Håber det giver mening, ellers kan det ses her: http://esbencn.dk/

Min kode er:
    <script type="text/javascript">
    $(document).ready(function() {
    $('#submenu_items_183').hide();
   
    $('#menu_item_183').mouseenter(function() {
    $('#submenu_items_183').fadeIn(500);
    return false;
  });
 
  $('#menu_item_183').mouseleave(function() {
    $('#submenu_items_183').fadeOut(2000);
    return false;
  });
 
      $('#submenu_items_183').mouseenter(function() {
    $('#submenu_items_183').fadeIn(500);
    return false;
  });
 
  $('#submenu_items_183').mouseleave(function() {
    $('#submenu_items_183').fadeOut(2000);
    return false;
  });
 
  $('#submenu_items_188').hide();
   
    $('#menu_item_188').mouseenter(function() {
    $('#submenu_items_188').fadeIn(500);
    return false;
  });
 
  $('#menu_item_188').mouseleave(function() {
    $('#submenu_items_188').fadeOut(2000);
    return false;
  });
      $('#submenu_items_188').mouseenter(function() {
    $('#submenu_items_188').fadeIn(500);
    return false;
  });
 
  $('#submenu_items_188').mouseleave(function() {
    $('#submenu_items_188').fadeOut(2000);
    return false;
  });
 
 
    });
    </script>


<?php $main_pages = get_pages( array('sort_order' => 'DESC','sort_column' => 'menu_order','exclude' => array(11),'post_type' => 'page', 'post_status' => 'publish','parent' => 0) );
                foreach( $main_pages as $main_page ) {
                echo "<div class='menu_item' id='menu_item_".$main_page->ID."'>".$main_page->post_title."<div id='submenu_items_".$main_page->ID."'>";
               
                $sub_pages = get_pages( array('child_of' => $main_page->ID,'sort_order' => 'DESC','sort_column' => 'menu_order','post_type' => 'page', 'post_status' => 'publish') );
                foreach( $sub_pages as $sub_page ) {
                echo "<div class='submenu'><a href='".get_page_link($sub_page->ID)."'>".$sub_page->post_title."</a></div>";
                }
               
                echo "</div></div>";
           
                }
                ?>

Håber nogen kan hjælpe mig med at optimere det en smugle! :)
Avatar billede Thomas_E Nybegynder
03. november 2011 - 11:12 #1
Du kan slippe for at lave en funktion for hvert element hvis du bare giver dem den samme css class.

så kan du gøre det sådan her :


$('.menu_item').each(function(){

$(this).hide();

});

$('.menu_item').mouseenter(function() {
    $(this).fadeIn(500);
    return false;
  });

  $('.menu_item').mouseleave(function() {
    $(this).fadeOut(2000);
    return false;
  });

for at slippe for at det står og blinker skal du lave sætte koden som får menu elementerne til at komme frem på et parent element til disse så musen ikke forlader dette når den flyttes
Avatar billede esbenn Nybegynder
17. januar 2012 - 20:13 #2
Lukket!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester