Question

当鼠标位于div .frame上时，我想在div .frame内部切换div .content 当鼠标移出.frame时，我希望.content再次切换并移除。

它正在运行，但我有几个问题，首先当鼠标出局.frame，.content不是toggeling但它只是删除没有任何影响。

然后当鼠标结束.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

jquery，切换问题

1 个答案: