Jquery transit & Mouseover

Question

I would like to create a transition animation on mouseover with the script : Transit All is done, well... with one exception. The transition works, but if you pass the mouses several times (like 5 times for exemples) on the 3 different blocks, the animations continues to play ! It creates a twinkle effect, but i don't like ... A picture is worth a thousand words : this is my code and the problem is with : http://jsfiddle.net/u4Dk4/1/

Thanks for your precious help.

$(function() {
    $("#A").mouseover( function() {
    $("#A").transition({ opacity: '0'}, 500);}); });
$(function() {
    $("#A").mouseout( function(){
    $("#A").transition({ opacity: '1'}, 500);}); });

Answer 1

You create a queue of animations. Remove that queue with the stop() function.

Heres your altered Fiddle

$("#A").mouseover( function() {
$("#A").stop().transition({ opacity: '0'}, 500);}); });
$(function() {
$("#A").mouseout( 
function(){
$("#A").stop().transition({ opacity: '1'}, 500);}); });