CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2071270
user2071270

Reputation: 172

setting opacity using jquery

i am trying to place one div on top of another and and set the opacity of the top div to 0. On hover jquery will animate by setting opacity of top div to 1 and increasing the width and height to cover the bottom div.

Now the problem is my animate function does not get triggered. Please explain what mistakes i have done in the code. Below is a sample of my code.

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

Upvotes: 1

Views: 684

Answers (4)

Mutu Yolbulan
Mutu Yolbulan

Reputation: 1052

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

Upvotes: 1

Juancarlos Rodr&#237;guez
Juancarlos Rodr&#237;guez

Reputation: 1584

I just create an example using your code. Right now it's working. Try to don't use functions on your html code.

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.
  }
);

Regards

Upvotes: 1

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

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

Upvotes: 1

rajesh kakawat
rajesh kakawat

Reputation: 10896

try something like this

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

REFERENCE

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

Example

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

Upvotes: 3

Related Questions