2

当我的鼠标悬停在 div .frame 上时，我想滑动切换 2 div：.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/

4

1 回答 1

0

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

这是最终的 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)
});

我还对以下内容进行了一些 CSS 更改content2：

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

还有一个JSFiddle

于 2013-09-06T19:08:36.977 回答