1

我正在尝试将一个 div 放在另一个 div 上，并将顶部 div 的不透明度设置为 0。悬停时 jquery 将通过将顶部 div 的不透明度设置为 1 并增加宽度和高度以覆盖底部 div 来进行动画处理。

现在的问题是我的动画功能没有被触发。请解释我在代码中犯了哪些错误。下面是我的代码示例。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript">
      function over(ele)
      {

          $("#"+ele).animate(function()
          {

           opacity:1,
           width:"300px",
           height:"300px",
           },2000);
      }
      </script>
  <style>
      #container{
          width:300px;
          height: 300px;
          position: relative;
          background-color: brown;
      }

      #bot{
          width:300px;
          height:300px;
          float:left;
          position: absolute;
          display: inline-block;
          background-color: teal;
      }
      #top{
       width: 100px;
       height:100px;
       margin: 0 auto;
    background-color: gold;
       opacity: 0;
       z-index:100;
      }

  </style>
 <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
</head>
<body>

    <article id="container"><ul>
    <li id="bot">Maclean 
        <div id="top"  onmouseover="over(this.id);">Pinto </div>

    </li>
    </ul>  

</article>
</body>
</html>
4

4 回答 4

3

尝试这样的事情

             $("#"+ele).animate(
              {
                   opacity:1,
                   width:"300",
                   height:"300",
               },2000);

参考

http://api.jquery.com/animate/

例子

             $( "#book" ).animate({
                 opacity: 0.25,
                 left: "+=50",
                 height: "toggle"
                 }, 5000, function() {
                 // Animation complete.
            });
于 2013-11-14T07:40:46.523 回答
1 
function over(ele){    
          $("#"+ele).animate({    
           opacity:1,
           width:"300px",
           height:"300px"
           },2000);
}
于 2013-11-14T07:44:24.063 回答
1 
  $("#"+ele).animate(function()
  {
       opacity:1,
       width:"300px",
       height:"300px", //no comma here after height
       },2000);
  }
于 2013-11-14T07:44:33.963 回答
1

我只是使用您的代码创建一个示例。现在它正在工作。尽量不要在你的 html 代码中使用函数。

http://jsfiddle.net/L7u7r/

$( "#top" ).hover(
  function() {
    // A function to execute when the mouse pointer enters the element.
    $(this).animate({
      opacity: 1,
      width:"300px",
      height:"300px"
    }, 2000, function() {
      // Code when the animation is complete.
    });
  }, function() {
    // A function to execute when the mouse pointer leaves the element.
  }
);

问候

于 2013-11-14T08:02:07.177 回答