1

ある div を別の div の上に配置し、上部の div の不透明度を 0 に設定しようとしています。ホバーすると、上部の div の不透明度を 1 に設定し、幅と高さを増やして下部の div をカバーすることで、jquery がアニメーション化されます。

問題は、アニメーション機能がトリガーされないことです。私がコードで行った間違いを説明してください。以下は私のコードのサンプルです。

<!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 に答える