javascript - 如何在同一元素上做并行动画

Question

这是 jsfiddle 中的代码!

这里是 the actual site !

问题 1:似乎当我在单击 enter 时调用函数时，它们不会依次执行，如果它是并行的并且同时执行所有操作，它有时会起作用!但这不是真正的问题，我希望得到一些建议!

实际问题:当我调用 enter 时，我切换所有的类，然后在 div.third 上做一个并行动画(使背景变绿或变红，然后淡出)，问题是，当我做的足够快时，它不会调整大小div.fourth 直到背景动画结束。所以我认为解决这个问题的方法是平行动画女巫不与主动画交互，因此 switchClases()。

神奇的代码:

// 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) 如何找到双重动画的解决方案？
2) 我如何改进这段代码？(即，使用更少的 jquery)

编辑:如您所见，我向每个新的 div.third 添加了额外的 uniqueID 类。我想做的是仅在给定的 uniqueID 上转换 backgroundColor 动画，但不与基本的第三>第四>第五类动画交互，就像它们有自己独立的东西一样!

Answer 1

jQuery 中的并行动画:您可以通过将属性对象传递给动画函数来执行并​​行动画。例如:

var animateProperties = {

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

}

object.animate(animateProperties);

您可以使用停止功能来停止正在进行的动画。我修改了你的代码，调用animate函数的代码如下。

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);
}

您可以在此处找到代码的最终版本 http://jsfiddle.net/diode/rBqVE/6/

我已经使用配置对象使其可配置。您可以在代码中找到它，但要获得最佳结果，您还必须修改 css。