Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts

    opacity and css transitions

    Not sure if this is a css question or javascript. I think a css question.

    I'm trying to figure out how to use the new css transition to change opacity. I have an onclick event from javascript that changes a div to display:block, and I want to have it change the opacity to 1, but go gradually with css transitions.

    Right now the div appears, but not gradually as I'd like.

    Code:
    pentagon2.on('click', function() {
            document.getElementById('select2').style.display = "block";
            document.getElementById('select2').style.opacity='99';
    document.getElementById('select2').style.filter='alpha(opacity=99)';
    
    }
    Here's the div to make appear:
    Code:
     <div class="newClass" id="select2">
                    <p>Selected 2</p>
                </div>
    and the css:

    Code:
    .newClass {display:none;opacity:0;transition:opacity 4s;
    -moz-transition:opacity 4s; /* Firefox 4 */
    -webkit-transition:opacity 4s; /* Safari and Chrome */
    -o-transition:opacity 4s; /* Opera */"}

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello turpentine,
    I'm sure I'm missing the reason for the .js ...
    Not sure hiding your link is the best way to get people to click on it.

    Look at this snippet, no .js and the link is slightly visible. Opacity and transition work so even if I'm way off base it may help.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #000;
    	background: #fc6;
    }
    #container {
    	width: 700px;
    	margin: 0 auto;
    	padding: 50px;
    	background: #999;
    }
    .newClass {
    	width: 400px;
    	margin: 30px auto;
    	padding: 20px 10px;
    	display: block;
    	background: #ccc;
    	opacity: .25;
    }
    .newClass:hover {
    	opacity: 1;
    	transition: opacity 4s;
    }
    </style>
    </head>
    <body>
    	<div id="container">
    		<div  class="newClass">
    			<p>Selected 2</p>
    		</div>
    	<!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    419
    Thanks
    18
    Thanked 2 Times in 2 Posts
    There are some details I didn't clarify.

    There's a larger background image (building blueprint with several units) that they will roll over. When they roll over the section where a transparent canvas element is, in a div laid over the background image - that's when it'll come into view, so they can click on it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •