setting opacity using jquery

Question

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>

make a fiddle for this...that will help us to find the problem easily — Sindhu
– Sindhu, Commented Nov 14, 2013 at 7:40

rajesh kakawat · Accepted Answer · 2013-11-14 07:40:46Z

3

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

answered Nov 14, 2013 at 7:40

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ankit Tyagi · Accepted Answer · 2013-11-14 07:44:24Z

1

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

answered Nov 14, 2013 at 7:44

Ankit Tyagi

2,37511 silver badges20 bronze badges

Comments

Juancarlos Rodríguez · Accepted Answer · 2013-11-14 08:13:42Z

1

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

edited Nov 14, 2013 at 8:13

answered Nov 14, 2013 at 8:02

Juancarlos Rodríguez

1,5842 gold badges12 silver badges11 bronze badges

Comments

David · Accepted Answer · 2019-01-07 13:54:49Z

1

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

edited Jan 7, 2019 at 13:54

David

3,3231 gold badge42 silver badges57 bronze badges

answered Nov 14, 2013 at 7:44

Mutu Yolbulan

1,0521 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

setting opacity using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related