Javascript 使用jquery设置不透明度_Javascript_Jquery_Html_Css

Javascript 使用jquery设置不透明度

javascript jquery html css

Javascript 使用jquery设置不透明度,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试将一个div置于另一个div之上，并将顶部div的不透明度设置为0。悬停时，jquery将通过将top div的不透明度设置为1并增加宽度和高度以覆盖底部div来设置动画现在的问题是我的动画功能没有被触发。请解释我在代码中犯了哪些错误。下面是我的代码示例 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hover demo&l

我正在尝试将一个div置于另一个div之上，并将顶部div的不透明度设置为0。悬停时，jquery将通过将top 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>


悬停演示
功能结束（ele）
{
$（“#”+ele）.animate（函数（）
{
不透明度：1，
宽度：“300px”，
高度：“300px”，
},2000);
}
#容器{
宽度：300px；
高度：300px；
位置：相对位置；
背景颜色：棕色；
}
#机器人{
宽度：300px；
高度：300px；
浮动：左；
位置：绝对位置；
显示：内联块；
背景色：青色；
}
#顶{
宽度：100px；
高度：100px；
保证金：0自动；
背景颜色：金色；
不透明度：0；
z指数：100；
}

麦克莱恩
平托

试试这样的方法

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

参考文献

范例

             $( "#book" ).animate({
                 opacity: 0.25,
                 left: "+=50",
                 height: "toggle"
                 }, 5000, function() {
                 // Animation complete.
            });

试试这样的

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

参考文献

范例

             $( "#book" ).animate({
                 opacity: 0.25,
                 left: "+=50",
                 height: "toggle"
                 }, 5000, function() {
                 // Animation complete.
            });

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

关于

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

注意

对此进行调整…这将帮助我们轻松找到问题您在浏览器控制台中有错误吗？对此进行调整…这将帮助我们轻松找到问题您在浏览器控制台中有错误吗？

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