同時jQueryアニメーション

Question

私はfadeIn（不透明度トグル）とボーダーフェード（jquery-animate-colorsを使用）を同時に発生させようとしていますが、何か問題があります。誰かが次のコードを見直すのを助けることができるか

$.fn.extend({ 
    key_fadeIn: function() { 
    return $(this).animate({ 
     opacity: "1" 
    }, 600); 
    }, 
    key_fadeOut: function() { 
    return $(this).animate({ 
     opacity: "0.4" 
    }, 600); 
    } 
}); 

fadeUnselected = function(row) { 
    $("#bar > div").filter(function() { 
    return $(this).id !== row; 
    }).key_fadeOut(); 
    return $(row).key_fadeIn(); 
}; 

highlightRow = function(row, count) { 
    return $(row).animate({ 
    "border-color": "#3737A2" 
    }).animate({ 
    "border-color": "#FFFFFF" 
    }).animate({ 
    "border-color": "#3737A2" 
    }).animate({ 
    "border-color": "#FFFFFF" 
    }); 
}; 


fadeUnselected("#foo"); 
highlightRow("#foo"); // doesn't fire until fadeUnselected is complete 

本当にありがとう。ありがとう！

Answer 1

デフォルトでは、JQueryはエフェクトキューにアニメーションを配置します。アニメーションをすぐに実行したい場合は、アニメーションオプションマップのqueue:falseフラグを設定します。例えば

は、あなたのケースでは、

$(this).animate({ 
     opacity: "1" 
    }, 600); 

は、あなたはおそらくオプションのマップを使用し、同様に国境アニメーション用のキューを設定したいと思います

$(this).animate(
{ 
    opacity: "1" 
}, 
{ 
    duration:600, 
    queue:false 
}); 

なります。

http://api.jquery.com/animate/

Answer 2

$.fn.extend({ 
    key_fadeIn: function() { 
    return $(this).animate({ 
     opacity: "1" 
    }, { duration:600, queue:false }); 
    }, 
    key_fadeOut: function() { 
    return $(this).animate({ 
     opacity: "0.4" 
    }, { duration:600, queue:false }); 
    } 
}); 

fadeUnselected = function(row) { 
    $("#bar > div").filter(function() { 
    return $(this).id !== row; 
    }).key_fadeOut(); 
    return $(row).key_fadeIn(); 
}; 

highlightRow = function(row, count) { 
    return $(row).animate({ 
    "border-color": "#3737A2" 
    }).animate({ 
    "border-color": "#FFFFFF" 
    }).animate({ 
    "border-color": "#3737A2" 
    }).animate({ 
    "border-color": "#FFFFFF" 
    }); 
};