SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Guru worchyld's Avatar
    Join Date
    Jul 2003
    Newcastle upon Tyne
    0 Post(s)
    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.

    <script type="text/javascript" src="dojo.js"></script>
    <script type="text/javascript">
    	dojo.require("dojo.event.*");       // sophisticated AOP event handling
    	dojo.require("*");          // 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");
    <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;
    <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


Posting Permissions

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