同步jQuery動畫

Question

我試圖讓一個淡入淡出（不透明切換）和邊框淡出（使用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" 
    }); 
};