マウスホバーが間違ったimgを置き換えます。src

Question

だから、私は奇妙なバグがあります。 fast move mouse around the page jqueryが正方形ブロック内の間違ったimg srcをプレビューで置き換えた場合。

これはjsのコードです：

$('.mini-info').bind('mouseenter', function() { 
    var xex = $(this).position().left; 
    var yey = $(this).position().top; 
    sim = $('img', this).attr('src'); 
    kuda = $('a', this).attr('href'); 


    $('#bcase div.'+$(this).attr('id')).addClass('active').css({ 
     'top' : yey, 
     'left' : xex 
    }).attr({'onclick': 'location.href="'+kuda+'"'}); 

    var omg = $('#bcase div.'+$(this).attr('id')+' div.b').length; 

    $('#bcase div.'+$(this).attr('id')+' div.b').css({ 
     'width': wid/omg 
    }); 
    }); 



    $('#bcase > div').bind('mouseleave', function() { 
    $(this).removeClass('active'); 
    $('.mini-info#'+$(this).attr('class')+' img').attr({'src': sim}); 
    }); 

それは修正することが可能ですか？

通常の作業は、プレビューで正方形のブロックの1つにマウスを動かすと、スクリプトはマウスの下の画像を変更します。それはうまくいく。しかし、上記のバグは良くありません。

Answer 1

mouseleaveイベントでは、mouseenterイベントで定義されている変数simを使用します。
次に、速いマウス操作で、前のイベントのマウスが離れる前に、他のdivのマウスが呼び出されます。

アーチを変更する必要があります。たとえば、mouseenterで新しいdivを作成する場合は、この時点でmouseleaveイベントをバインドします。そのLKE
何か（テストしていません）：

$('.mini-info').bind('mouseenter', function() { 
    var xex = $(this).position().left; 
    var yey = $(this).position().top; 
    var sim = $('img', this).attr('src'); 
    kuda = $('a', this).attr('href'); 


    $('#bcase div.'+$(this).attr('id')).addClass('active').css({ 
    'top' : yey, 
    'left' : xex 
    }).attr({'onclick': 'location.href="'+kuda+'"'}) 
    .bind('mouseleave', function() { 
    $(this).removeClass('active'); 
    $('.mini-info#'+$(this).attr('class')+' img').attr({'src': sim}); 
    }); 

    var omg = $('#bcase div.'+$(this).attr('id')+' div.b').length; 

    $('#bcase div.'+$(this).attr('id')+' div.b').css({ 
    'width': wid/omg 
    }); 
}); 

はjsfiddleを参照してください。http://jsfiddle.net/bouillard/ptJQy/