Click here to Skip to main content
15,878,048 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
.html code

HTML
<html>
   <head>
      <title>The jQuery Example</title>
	  <link rel="stylesheet" type="text/css" href="css/main.css"/>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
   
         $(document).ready(function() {

            $("#out").hover(function(){
               $("#block").animate({ 
				  visibility: "visible",
                  width: "300px",
				  
                  opacity: 0.4,
                  marginLeft: "0.6in",
                  fontSize: "3em", 
                  borderWidth: "10px"
               }, 1500 );
            });
				
            $("#in").hover(function(){
				$("#block").show("scale",1500);
               $("#block").animate({ 
				  visibility: "visible",
                  width: "900px",
				  
                  opacity: 1.0,
                  marginLeft: "0in",
                  fontSize: "100%", 
                  borderWidth: "1px"
               }, 1500 );
            });
         });
      </script>
		
      <style>
         div {background-color:#bca; width:100px; border:1px solid green;}
      </style>
		
   </head>
	
   <body>

      <p>Click on any of the buttons</p>
	
      <button id="out"> Animate Out </button>
      <button id="in"> Animate In</button>
		<!--<img id="in" src="img/bat.jpg"/>
		<img id="out" src="img/bat.jpg"/>-->
      <div id="block"><img src="img/bat.jpg"/></div>
   </body>
	
</html>


.css code

CSS
#block
{
	visibility:hidden;


}


Initially i set the property of div tag "hidden" using css and on image hover effect i want to visible that div tag but the code didn't work ..!!
Posted

1 solution

When you run animate in the way you do it does not affect the CSS properties from the CSS rule - they are excluded (you can see that the inline style created after animate does not contain visibility at all)...
What you can do is setting visibility before animate:
JavaScript
$("#block").css({visibility: "visible"}
            ).animate({
            width: "300px",
            opacity: 0.4,
            marginLeft: "0.6in",
            fontSize: "3em",
            borderWidth: "10px"
        }, 1500 );
 
Share this answer
 
Comments
vihangshah 9-Jun-15 10:33am    
Thanks it works...!!
Kornfeld Eliyahu Peter 9-Jun-15 14:45pm    
You are welcome...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900