#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    676
    Rep Power
    441

    Jquery callback happening at wrong time


    I'm sure I'm doing something wrong, but I just stumbled across this:

    Code:
    	$(document).ready(function(){
    		$("li li").click(function(){
    			var correct=$(this).parent().find(".correct")
    			correct.addClass("correctAnswer");
    			correct.animate({fontSize: "2em"}, 250, function(){
    				alert("done");
    				$(this).parents().find(".supplemental").slideDown();		
    			});
    		});
    	});
    Basically it's a simple quiz, and if you click on an answer, it adds the class "correctAnswer" to the proper answer, animates the font size up, and then slides on some supplemental information.

    I want the supplemental info to appear after the font size transition, and you'll notice I added a callback with an alert. The thing is, the alert is firing BEFORE the font size transition. I've discovered this is related to a css transition I have set on the correctAnswer class:

    Code:
    .correctAnswer {
    	background: #aaffba url(checkmark.png) center right no-repeat;
    /* various browser options omitted */	
    transition: all 1s linear;
    }
    The alert is happening at the end of the CSS transition instead of after the font size animation. If I remove the CSS transition, the alert happens at the right time.

    P.S. I know I could add the font size transition to the CSS class, but most of my users are on IE8 (intranet site) and I just added the transition as a nice extra for those using another browser.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    676
    Rep Power
    441
    Actually I think I see what's going on now...the CSS transition is overwriting the time on the JQuery animation. I should be able to specify what to transition, or just make them the same time to make it work.

IMN logo majestic logo threadwatch logo seochat tools logo