Question

当我的鼠标在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都是slidetoggeling：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

jquery，鼠标悬停时双滑动

1 个答案: