Problem with a jQuery function not working

JavaScript
1

When I click on the “Click Here” button, I expect the div to appear but that isn’t happening,why? what am I doing wrong?


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
    
        div{
            
            position: absolute;
            visibility: hidden;
            width: 100px;
            height: 100px;
            background: black;
        }
        
    </style>
</head>
<body>

    <div>Hello</div>
	
    <button>Click Here</button>
	
    <script src="jquery-1.11.2.min.js"></script>
	
    <script>
    
        $('button').click(function(){
            $('div').animate({visibility:visible}, 1000);    
        });
    
    </script>
</body>
</html>
2

Hey,

The reason this doesn’t work is that jQuery can’t animate the visibliity property. Have you looked into fadeIn / fadeOut? Those default jQuery functions?

Perhaps animate the opacity property instead? Is there a reason you MUST use visibility? Or would fadeIn/fadeOut work for your needs?

3

I know the fadein and fadeout functions but I don’t wanna use “display:none”

4

Isn’t there anyway to work around this without using the opacity property?

5

I am unable to see the code in your first post. Assuming it’s there, please try preceeding the code with three left tics on a line by themselves and 3 more after the last line of code.

Thanks

6

Well you’re taking out display / opacity for showing/hiding the elements. I’m not sure of anther way to make this work since you don’t want to use either. Good thing you posted it here on these forums so other, more knowledgeable members can help :thumbsup: .

7 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style>
    
        div{
            
            position: absolute;
            visibility: hidden;
            width: 100px;
            height: 100px;
            background: black;
        }
        
    </style>
</head>
<body>

    <div>Hello</div>
	
    <button>Click Here</button>
	
    <script src="jquery-1.11.2.min.js"></script>
	
    <script>
    
        $('button').click(function(){
            $('div').animate({visibility:visible}, 1000);    
        });
    
    </script>
</body>
</html>
8

Thank you for trying to help :smile:

9

Why don’t you want to use display:none or opacity?

If you can explain your use case then it will help find a solution that fits.:slight_smile:

You could just change the visibility back to visible with a class.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
div {
	position: absolute;
	visibility: hidden;
	width: 100px;
	height: 100px;
	background: black;
}
.show {
	visibility:visible;
}
</style>
</head>
<body>
<div>Hello</div>
<button>Click Here</button>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
    
        $('button').click(function(){
            $('div').addClass('show');    
        });
    
    </script>
</body>
</html>
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.