1

マウスが div .frame の上にあるとき、その div .frame 内の div .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/

4

1 に答える 1

2

効果が終了するまで待機するには、コールバック関数を使用する必要があります。mouseenter代わりに,を使用しmouseleaveます。また、コードには小さな問題が 1 つあり.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();
    })
});

デモ

于 2013-09-05T12:16:38.950 に答える