jquery，問題與切換

Question

當鼠標是在一個div .frame我想切換一個div。內容的那個div .frame 當鼠標移出.frame我想.content再次切換，並刪除。

它的工作，但我有幾個問題，首先當鼠標是out.frame，.content不toggeling，但它只是刪除沒有任何影響。

然後，當鼠標懸停。內容（這是內部.frame）。內容被刪除...

我的代碼是：

$(document).on('mouseover', '.frame', function() { 
    var el = $(this); 
    el.find('.inside').append('<div class="content"></div>'); 
    var content = $('.content:last'); 
    content.hide(); 
    content.html('aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>'); 
    $('.content').toggle(300); 
}).on('mouseout', function() { 
    var content = $('.content:last'); 
    $('.content').stop().toggle(300).remove(); 
}); 

這裏的jsfiddle：http://jsfiddle.net/HAxPB/

Answer 1

你必須使用回調函數等到效果完成。改用mouseenter,mouseleave。還有一個與代碼一個小問題：.on('mouseout', function() {,應該是.on('mouseleave',",frame", function() {,

$(document).on('mouseenter', '.frame', function() { 
    if ($('.content').length > 0){ 
     return; 
    } 
    var el = $(this); 
    el.find('.inside').append('<div class="content"></div>'); 
    var content = $('.content:last'); 
    content.hide(); 
    content.html('aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>aaaaaaaaaaaa<br>'); 
    $('.content').toggle(300); 
}).on('mouseleave','.frame', function() { 
    var content = $('.content:last'); 
    $('.content').stop().toggle(300,function(){ 
     $(this).remove(); 
    }) 
}); 

DEMO