onmouseover jquery .animate()

J'essaie d'implémenter un effet onmouseover jquery .animate(). Fondamentalement, j'ai un div de navigation et à côté il est caché (opacité: 0) div. J'essaie d'utiliser la méthode jquery .animate() pour que le div caché (un sous-menu) apparaisse lorsque l'une des options est survolée.onmouseover jquery .animate()

La ligne de code est ici:

<li class="b1" onmouseover="function(){$(".subnav1").animate({opacity:1,left:'270px'}, 250, function(){});">

Le code complet est ici (inclus css)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>BEAN - main</title> 
<link rel="stylesheet" type="text/css" href="css/share.css" /> 
<script type="text/javascript" src="js/jquery.1.7.2.js"></script> 
<style> 
body { 
    min-width:960px; 
} 
.container{ 
    position:absolute; 
    left:50%; 
    width:960px; 
    margin-left:-480px; 
} 
.topbar{ 
    width:960px; 
    height:10px; 
    background-color:#000; 
    margin-top:-10px; 
    margin-bottom:5px; 
} 
.logo{ 
    position:absolute; 
    margin-top:15px; 
    width:140px; 
    height:140px; 
    float:left; 
    margin-left:10px; 
} 
.mainnav{ 
    position:absolute; 
    margin-top:15px; 
    font-family: 'Share', cursive; 
    left:160px; 
    width:110px; 
    height:140px; 
    font-size:16px; 
    float:left; 
} 
.subnav1{ 
    position:absolute; 
    margin-top:15px; 
    font-family: 'Share', cursive; 
    left:290px; 
    width:110px; 
    height:140px; 
    font-size:16px; 
    float:left; 
    opacity:0; 
} 
.subnav2{ 
    position:absolute; 
    margin-top:15px; 
    font-family: 'Share', cursive; 
    left:290px; 
    width:110px; 
    height:140px; 
    font-size:16px; 
    float:left; 
    opacity:0; 
} 
.subnav3{ 
    position:absolute; 
    margin-top:15px; 
    font-family: 'Share', cursive; 
    left:290px; 
    width:110px; 
    height:140px; 
    font-size:16px; 
    float:left; 
    opacity:0; 
} 
.language{ 
    position:absolute; 
    margin-top:15px; 
    left:740px; 
    width:220px; 
    margin-right:10px; 
    height:140px; 
    float:left; 
} 
ul{ 
    margin:0px; 
    padding:0px; 
    list-style:none; 
} 
li{ 
    display:list-item; 
    text-align:left; 
} 
A:link { 
    text-decoration: none; 
    color: black; 
} 
A:visited { 
    text-decoration: none; 
    color: black; 
} 
A:active { 
    text-decoration: none; 
    color: black; 
} 
A:hover { 
    text-decoration: none; 
    color: red; 
} 
</style> 
</head> 

<body> 
<div class="container"> 
    <div class="topbar"></div> 
    <div class="logo"><img src="images/logo.png" width="140px" height="140px" /></div> 
    <div class="mainnav"> 
     <ul> 
      <li class="b1" onmouseover="function(){$(".subnav1").animate({opacity:1,left:'270px'}, 250, function(){});"> 
       <a href="#">about me</a> 
      </li> 
      <li class="b2"> 
       <a href="#">photography</a> 
      </li> 
      <li class="b3"> 
       <a href="#">urban planning</a> 
      </li> 
      <li class="b4"> 
       <a href="#">graphic design</a> 
      </li> 
      <li class="b5"> 
       <a href="#">my blog</a> 
      </li> 
     </ul> 
    </div> 
    <div class="subnav1"> 
     <ul id="sub1"> 
      <li> 
       <a href="#">Facts</a> 
      </li> 
      <li> 
       <a href="#">Values</a> 
      </li> 
     </ul> 
    </div> 
    <div class="subnav2"> 
     <ul id="sub2"> 
      <li> 
       <a href="#">Photostream</a> 
      </li> 
      <li> 
       <a href="#">The Map</a> 
      </li> 
     </ul> 
    </div> 
    <div class="subnav3"> 
     <ul id="sub3"> 
      <li> 
       <a href="#">Essay Collection</a> 
      </li> 
      <li> 
       <a href="#">The City Project</a> 
      </li> 
     </ul> 
    </div> 
    <div class="language"> 
    blah 
    </div> 
</div> 
</body> 
</html>

Source

2012-07-06 Bryan Wong

Ceci peut être résolu par css à moins qu'il soit nécessaire d'utiliser jquery. – Dips

Voici une solution rapide. Demo here

Pour une meilleure pratique, utilisez le balisage html comme ceci.

<div class="mainnav"> 
     <ul> 
      <li class="b1"> 
       <a href="#">about me</a> 
       <ul id="sub1"> 
      <li> 
       <a href="#">Facts</a> 
      </li> 
      <li> 
       <a href="#">Values</a> 
      </li> 
     </ul> 
      </li> 
      <li class="b2"> 
       <a href="#">photography</a> 
       <ul id="sub2"> 
      <li> 
       <a href="#">Photostream</a> 
      </li> 
      <li> 
       <a href="#">The Map</a> 
      </li> 
     </ul> 
      </li> 
      <li class="b3"> 
       <a href="#">urban planning</a> 
      </li> 
      <li class="b4"> 
       <a href="#">graphic design</a> 
      </li> 
      <li class="b5"> 
       <a href="#">my blog</a> 
      </li> 
     </ul> 
    </div>

Ce code fonctionne pour afficher masquer le sous-menu

$(".mainnav li").hover(function() { 
    $(this).children('ul').fadeIn(); 
}).mouseleave(function() { 
    $(this).children('ul').fadeOut(); 
});

Source

2012-07-06 05:18:17 Dips

Hmm ..... Ça ne semble pas fonctionner. J'ai le script juste au bas de la ... Serait-il possible pour vous de montrer l'implémentation sur le code que j'ai fourni dans le premier post? Merci! –

onmouseover jquery .animate()

Répondre

Questions connexes