Question

我试图将一个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>

Answer 1

尝试这样的事情

             $("#"+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.
            });

Answer 2

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

Answer 3

  $("#"+ele).animate(function()
  {
       opacity:1,
       width:"300px",
       height:"300px", //no comma here after height
       },2000);
  }

Answer 4

我只是使用您的代码创建一个示例。现在它正在运作。尽量不要在你的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.
  }
);

此致

使用jquery设置不透明度

4 个答案: