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
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery: IE doesnt fade in with animate()

    Hi,
    Does anyone know why IE does not fade in the image with animate() like firefox does?

    here is my jquery code,

    Code:
    $(document).ready(function(){
    	
    	$("#supersize").css({ 
    		opacity: '.0',
    		filter: 'alpha(opacity=0)'
    		});
    	
    	$("#supersize").animate({ 
    		opacity: '1.0',
    		filter: 'alpha(opacity=100)'
          	}, 1500);
    
    });

    html,

    Code:
    <div id="supersize">
    	<ul>
        	<li class="active" href="#"><img src="img_content/large/bg_01.jpg" alt="background"/></li>
        </ul>
    </div>
    Here is the link to see the page,
    http://lauthiamkok.net/tmp/jquery/animate/

    Many thanks if you have any idea...

    Cheers,
    Lau

  • #2
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    You're best of using something like;
    Code:
    $(function(){
      $('#supersize').hide().fadeIn(1500);
    });
    Also I do believe when using "opacity" jQuery will convert it to the most appropriate property for each browser so you don't need to specify filter. You can also specify floats and decimals without the need of quotes. Finally you may want to use chaining for improved performance like I demonstrated.

    This should work using your code;
    Code:
    $(document).ready(function(){
      $('#supersize').css('opacity', 0).animate({
        opacity: 1
      }, 1500);
    });
    Or a more expanded version for readability purposes.
    Code:
    $(document).ready(function(){
      $('#supersize').css('opacity', 0);
    
      $('#supersize').animate({
        opacity: 1
      }, 1500);
    });
    Last edited by Iszak; 12-13-2009 at 03:06 PM.

  • Users who have thanked Iszak for this post:

    lauthiamkok (12-13-2009)

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Iszak View Post
    You're best of using something like;
    Code:
    $(function(){
      $('#supersize').hide().fadeIn(1500);
    });
    Also I do believe when using "opacity" jQuery will convert it to the most appropriate property for each browser so you don't need to specify filter. You can also specify floats and decimals without the need of quotes. Finally you may want to use chaining for improved performance like I demonstrated.

    This should work using your code;
    Code:
    $(document).ready(function(){
      $('#supersize').css('opacity', 0).animate({
        opacity: 1
      }, 1500);
    });
    Or a more expanded version for readability purposes.
    Code:
    $(document).ready(function(){
      $('#supersize').css('opacity', 0);
    
      $('#supersize').animate({
        opacity: 1
      }, 1500);
    });
    thank you so much for this. now I know why it didnt work! thanks!


  •  

    Posting Permissions

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