0

我有一个 div .frame，当鼠标悬停在它上面时，我滑动切换 div .content，当鼠标离开 .frame 时，我再次滑动切换 .content。它运行良好，但我有两个问题：当鼠标进入和离开 .frame 非常快时，它会弄乱效果，然后我不知道为什么 .frame 和 .content 没有对齐。

我的CSS：

.frame{
    border-style:solid;
    border-width:1px;
    width:10%;
     position:relative;
}

.content { 
    border-style:solid;
    border-width:1px 1px 0px 1px;
    position:absolute;
    display:none;
}

我的html：

    <br><br>

<div class="frame">
    <div class="content"></div>
    <div class="inside">bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br />bla bla bla bla bla<br /></div>
</div>

和我的 jQuery：

    $(document).on('mouseenter', '.frame', function() { 
        var el = $(this);
        content = $(".content");
        content.css({"bottom":el.height(),"width":el.width()});
        content.html('ok ok ok ok');
        el.css("border-top-color","#FFFFFF");
        content.slideToggle(300);   
    }).on('mouseleave','.frame', function() {
        var el = $(this);
        content = $(".content");
        content.stop().slideToggle(300, function(){
            content.html('');
        el.css("border-top-color","#000000");
    });
});

这里是一个jsfiddle：http: //jsfiddle.net/malamine_kebe/Uj2yh/

4

1 回答 1

1

对于第一个问题，使用 -true, true作为参数传递给slideToggle

$(document).on('mouseenter', '.frame', function() { 
    var el = $(this);
    content = $(".content");
    content.css({"bottom":el.height(),"width":el.width()});
    content.html('ok ok ok ok');
    el.css("border-top-color","#FFFFFF");
    content.stop(true, true).slideToggle(300);  
}).on('mouseleave','.frame', function() {
    var el = $(this);
    content = $(".content");
    content.stop(true, true).slideToggle(300, function(){
        content.html('');
        el.css("border-top-color","#000000");
    });
});

对于对齐问题 - 问题是边框用于frame元素并且在content框架内，因此框架边框将位于contents 边框之外。这里我使用的修复是content向左-px移动

.content { 
    border-style:solid;
    border-width:1px 1px 0px 1px;
    position:absolute;
    display:none;
    left: -1px;
}

演示：小提琴

于 2013-09-06T16:11:29.700 回答