onmouseover jquery .animate()

onmouseover jquery .animate() 효과를 구현하려고합니다. 기본적으로 탐색 div가 있고 그 옆에 숨겨진 (불투명도 : 0) div가 있습니다. jquery 메서드를 사용하여 .nimate() 숨겨진 된 div (하위 메뉴) 옵션 중 하나를 때 위에 나타납니다 만들려고. onmouseover jquery .animate()

코드 줄

은 여기에 있습니다 :

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

전체 코드는 여기 (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>

출처

2012-07-06 Bryan Wong

는 jQuery를 사용하는 것이 필요한 경우가 아니면이 CSS를 해결할 수 있습니다에게 숨길 보여 작동합니다. – Dips

여기 빠른 솔루션입니다. Demo here

모범 사례로는 이와 같은 HTML 마크 업을 사용하십시오.

<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>

이 코드는 하위 메뉴

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

출처

2012-07-06 05:18:17 Dips

음 ..... 작동하지 않는 것 같습니다. 맨 아래에 스크립트가 있습니다. 첫 번째 게시물에서 제공 한 코드에서 구현을 표시 할 수 있습니까? 감사! –

onmouseover jquery .animate()

답변

관련 문제