1

我制作了一个小 jquery 脚本，当鼠标悬停在 div .frame 上时，它会滑动切换两个 div：.contentTop 和 .contentBottom 它运行良好，但是当我将脚本应用于 2 个 div 时，我遇到了一些问题，首先是当我将鼠标从一个 div .frame 快速移动到另一个它会弄乱脚本，然后当鼠标在 .frame 上方时，我希望 .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/

4

1 回答 1

0

您所需要的一切：现场演示

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

于 2013-09-11T13:54:18.290 回答