Question

我做了一个小的jquery脚本，当鼠标在div .frame上时，它正在滑动两个div：.contentTop和.contentBottom 它运行良好，但是当我将脚本应用于2个div时，我遇到了一些问题，首先当我将鼠标从一个div。帧快速移动到另一个时，它会使脚本混乱，然后当鼠标结束时。框架我希望.contentBottom超越other.frame

我的css是：

    .frame{
    background-color: #FFFFFF;
    position:relative;
    width:40%;
}


.contentTop { 
    position:absolute;
    display:none;
    background-color: #FFFFFF;
}

.contentBottom { 
    position:absolute;
    background-color: #FFFFFF;
    display: none;
}

和我的jquery：

$(document).on('mouseenter', '.frame', function() {
    var el = $(this);
    var hauteur = el.height();
    var largeur = el.width();
    contentBottom = el.children(".contentBottom");
    contentTop = el.children(".contentTop");
    contentTop.css({"bottom":hauteur,"width":largeur}); 
    contentTop.html('top top top top');
    contentBottom.html('bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>');
    contentBottom.css({"top":hauteur,"width":largeur});
    contentBottom.stop(true, true).slideToggle(300);
    contentTop.stop(true, true).slideToggle(300);   
}).on('mouseleave','.frame', function() {
    var el = $(this);
    contentBottom = el.children(".contentBottom");
    contentTop = el.children(".contentTop");
    contentTop.stop(true, true).slideToggle(300, function(){
        contentTop.html('');
    });
    contentBottom.stop(true, true).slideToggle(300, function(){
        contentBottom.html('');
    });
});

我在这里做了一个jsfiddle：http://jsfiddle.net/malamine_kebe/2ANkq/2/

Answer 1

您需要的所有内容： LIVE DEMO

$(document).on('mouseenter mouseleave', '.frame', function( e ) {

    var $el=$(this),
        h = $el.height(),
        w = $el.width(),
        $bott = $el.find(".contentBottom"),
        $top  = $el.find(".contentTop"),
        mEnt  = e.type == "mouseenter"; // boolean

    // this
    $el.stop().animate({borderRadius: mEnt? 0 : 3 });

    // top
    $top.css({bottom: h, width: w, zIndex:1})
        .html('top top top top')
        .stop().slideToggle(function(){
             $(this).css({zIndex:0});
        });

    // bottom    
    $bott.css({top: h, width: w,  zIndex:1})
         .html('bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>bottom bottom bottom bottom<br>')
         .stop().slideToggle(function(){
             $(this).css({zIndex:0});
         });

});

_{注意： .stop()方法和mEnt布尔变量，它与条件运算符一起使用statement ? ifTrue : ifFalse}

jquery，mouseEnter和slideToggle问题

1 个答案: