Question

我有一个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/

Answer 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位于框架内，因此框架边框将位于content边框之外。我使用的修复方法是将content移至-px左侧

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

演示：Fiddle

jquery，当鼠标结束时发出slideToggle问题

1 个答案: