SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Guru worchyld's Avatar
    Join Date
    Jul 2003
    Location
    Newcastle upon Tyne
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using DOJO to fade show a visible CSS element.

    I want to fade show a CSS element using DOJO, but it is not working for some reason.

    The css element (fadeoutin) should not be visible when you run the page, and then fade out (that is from 0% opacity to 100% opacity).

    I believe it is because I need to hide the CSS element first, but if I add "display:none" to my CSS rules, nothing happens.

    The fadeHide action works fine (currently commented out).

    Therefore, my question is -- how do you fade out (fadeShow) a CSS element using the DOJO ajax library?

    Many thanks.

    Code:
    <script type="text/javascript" src="dojo.js"></script>
    
    <script type="text/javascript">
    
    	dojo.require("dojo.event.*");       // sophisticated AOP event handling
    	dojo.require("dojo.io.*");          // for Ajax requests
    	dojo.require("dojo.lfx.*");         // animations and eye candy
    
    	function init()
    	{	
    		// fade hide
    		// dojo.lfx.html.fadeHide(dojo.byId("fadeoutin"), 1000).play(); 
    		
    		// fade show (doesn't work)
    		dojo.lfx.html.fadeShow(dojo.byId("fadeoutin"), 3000).play();
    	}
    	
    	dojo.event.connect(window, "onload", "init");
    </script>
    
    
    <style type="text/css">
    	.box {
    		height: 140px;
    		width: 140px;
    		background: #94da3a;
    		padding: 0.4em;
    		color: #FFF;
    		float: left;
    		margin-right: 2em;
    		margin-bottom: 2em;
    		border: 2px solid #FFF;
    	}
    </style>
    
    <div id="fadeoutin" class="box">This box should be fading into view (ie: fade out)</div>
    Last edited by worchyld; Aug 8, 2006 at 02:59. Reason: Missing line


Bookmarks

Posting Permissions

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