同步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" 
    }); 
};