Question

Here is code in jsfiddle !

Here is the actual site !

Problem 1: It seem’s that when I call functions when clicking enter they don’t execute on after each other , it sometimes works if it goe’s in parallel and does everything at once! But this isn’t the actual problem, it’s something I would love some advice!

Problem Actual: When I call enter I switch all the clases and then do a parallel animation on div.third(making background green or red and then fading out), problem is, when I do fast enough it doesn’t resize div.fourth untill background animation finished. So I thought solution for this would be a parallel animation witch doesn’t interact with main animation thus switchClases().

Code where all the magic happens:

// Do everytime we press a key
$(document).keydown(function(){
    // By presing 'Enter' we call exec.
    $("#wraper input.third").bind('keydown',function(e){
        // Make key variable by phrasing the event
        var keyPresed = (e.keyCode ? e.keyCode : e.which);
        // Allow only backspace, delete  and enter
        if (keyPresed == 46 || keyPresed == 8 || keyPresed == 13){
            // If this is true animation is still in progress
            if (transAct) {
                // OBLIVION
                } 
            // Or else start another animation and execution
            else{
            // If 'enter' is pressed then and new row and execute everything
            if((keyPresed == 13) && $("input.third").val()){
                    //Set the new uniqueId
                    uniqueId++;
                    $("div.second").addClass("class"+uniqueId);
                    //Get result number because it will not be his name anymore
                    result = $("input.third").val();
                    //Switch clases
                    SwitchClases(_this);
                    transAct = true;
                    // Her we actualy insert the new line
                    $("<div class='first'>9 x 8 = <input class='first' type='text' disabled='true' maxlength='2'/></div>").css("opacity", "0").hide().prependTo(_this).slideDown().animate({opacity: 0.1},function(){
                            transAct = false;
                        })
                    $("div.third").append(" "+result) // Write down inputed result
                    $("input.third").fadeOut().remove() // Drop input box into black hole
                    $("div.fifth").fadeOut().remove(); // Do same thing to last division

                // Check if answer was correct!
                // Here are two examples with whom you can play as much as you like
                //$(".leftSide div.class"+(uniqueId-1)).stop().animate({backgroundColor: '#00DD00'},100).animate({backgroundColor: 'white'},900);
                // $(".leftSide").stop().animate({backgroundColor: '#DD0000'},100).animate({backgroundColor: 'white'},900);

                //Now set focus to next input area , so we can continue and be lazy by not clicking on new input box!
                $('.newEleCont input.second').focus();
                }
            }
        }
        // Restrict inputing any other character besides a number
        else {
            // Ensure that it is a number and stop the keypress
            if ((keyPresed < 48 || keyPresed > 57) && (keyPresed < 96 || keyPresed > 105 )) {
                e.preventDefault(); 
            }   
        }
    });
});

1) How could I find solution for double animation?
2) How could I improve this code?(that is , using less jquery)

EDIT: As you can see I added additional uniqueID class to every new div.third. And what I want to do is to cast backgroundColor animation only on given uniqueID BUT not interacing with basic third>fourth>fifth class animations, like if they did there own separate things!

Answer 1

Parallel Animation in jQuery : You can do parallel animation by passing the properties object to animate function. For example:

var animateProperties = {

    top:50px,
    left:100px,
    width:300px,

}

object.animate(animateProperties);

and you can use stop function to stop the animation in progress. I have modified your code, the code that calls animate function is given below.

var style = {

    "opacity": opacity,
    "font-size": fontSize + "px"

}


if(animate){

       if(index == config.activeIndex + 1){
        style.backgroundColor = '#00EE00';
        $(row).stop(true, true).animate(style, 100)
                .animate({backgroundColor: 'white'}, 1200);
       }else{
        $(row).stop(true, true).animate(style, 100);
       }

}else{
    $(row).css(style);
}

You can find the final version of code here http://jsfiddle.net/diode/rBqVE/6/

I have made this configurable using a config object. You can find it in the code, but to get the best result you will have to modify css also.