#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    39
    Rep Power
    2

    Odd transition behavior


    http://solosheff.com/sandbox.html

    When going from "web design" to "home" and back again multiple times, the website screenshot no longer animates to opacity: 1, but becomes visible suddenly with no transition. I'm new to jQuery so surely there is a tighter way to execute what I'm trying to achieve. Here is a link to the page...


    Code:
    $(document).ready(function() { 
    	$('#web').click( function() {
    		$('#main_Container').animate( { marginTop: '150px'}, 800, "easeInOutCubic", {queue: false} );
    		$('#main_Container > nav').animate( { width: '170px', height: '450px'}, 800, "easeInOutCubic", {queue: false} );
    		$('#logo').fadeOut(800, "easeInOutCubic", function() {
    			$('div.websites').css( { display: "inline-block"} );
    			$('div.websites').animate( { opacity: 1}, 500, "easeInOutCubic");
    		});
    	});
    
    	$('#home').click( function() {
    		$('div.websites').fadeOut(500, "easeInOutCubic", function() {
    			$('#main_Container').animate( { marginTop: '300px'}, 800, "easeInOutCubic" );
    			$('#main_Container > nav').animate( { width: '525px', height: '162px'}, 800, "easeInOutCubic" );
    			$('#logo').fadeIn(800, "easeInOutCubic");
    		});		
    	});
    });
    Last edited by solosheff; February 12th, 2014 at 08:49 AM.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,044
    Rep Power
    119
    The transition seems fine to me; what browser are you testing in..., is it Internet Explorer?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    39
    Rep Power
    2
    Originally Posted by web_loone08
    The transition seems fine to me; what browser are you testing in..., is it Internet Explorer?
    Chrome. The transition will work initially, but if you click the web design link again after clicking the home link, the logo may reappear quickly and the website screenshot will appear without transition.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,044
    Rep Power
    119
    Originally Posted by solosheff
    Chrome. The transition will work initially, but if you click the web design link again after clicking the home link, the logo may reappear quickly and the website screenshot will appear without transition.
    Maybe..., try using the $.bind() API; see what that does for the issue.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2013
    Posts
    67
    Rep Power
    0
    I've had similar issues in the past. I've found stopping the animation que before I add more to it has been helpful.

    http://api.jquery.com/stop/
    http://kawaii-nation.com (^._.^)ノ
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    39
    Rep Power
    2
    Thanks for the suggestions all. I figured out what was happening after observing Chrome Dev Tools during the animations.

    I wasn't returning the opacity of $('div.websites') back to 0 after fading out. So, when clicking the Web Design link after having clicked the Home link, the website screenshot would go from display: none to display: inline-block, but appear suddenly because opacity was already set to 1, and not reset to 0.

    I added the following line of code as the first statement of the $('home').click function() to remedy things...

    Code:
    $('div.websites').css( { opacity: 0} );
    Certainly a learning experience. Carry on everyone : )

IMN logo majestic logo threadwatch logo seochat tools logo