jquery，切换问题

Question

当鼠标悬停在 div .frame 上时，我想在该 div .frame 内切换 div .content 当鼠标离开 .frame 时，我希望 .content 再次切换并删除。

它可以工作，但我有几个问题，首先当鼠标不在 .frame 时，.content 没有切换，但它只是删除而没有任何影响。

然后当鼠标悬停在 .content（在 .frame 内）上时，.content 正在移除...

我的代码是：

$(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