jquery，在穆森特上双滑动切换

Question

当我的鼠标悬停在div .frame上时，我想滑动切换2div：.content和.content2我希望 .content 从下到上滑动切换，.content2 从上到下滑动。问题是它们都是从上到下滑动切换，但是当我只将我的代码设置为 slidetoggle .content 时，它会从下到上进行。

我的jQuery是

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

这里有一个示例，其中两个div 都在滑动：http://jsfiddle.net/malamine_kebe/utTcP/

这里有一个示例，其中 .content1 很好地滑动：http://jsfiddle.net/malamine_kebe/bgwSC/

Answer 1

好吧，在摆弄了这个坏男孩之后，我让它按照你想要的方式工作。

这是最后的JQuery：

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

我还对content2进行了一些 CSS 更改：

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

和一个JSFiddle