jquery, двойной слайдер на мышке

когда моя мышь находится над 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/


html jquery css slidetoggle
person user2461031    schedule 06.09.2013    source источник
comment
Вы можете явно использовать slideUp и slideDown.   -  person Derek S    schedule 06.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Ладно, повозившись с этим плохишом, я заставил его работать так, как ты хочешь.

Вот окончательный 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

person Tricky12    schedule 06.09.2013
comment
именно то, что я искал, большое спасибо... я изучу ваш код - person user2461031; 06.09.2013
comment
Без проблем! Основные изменения коснулись content2. Я в основном относился к нему так же, как вы уже относились к content. Поскольку позиция в content2 не была абсолютной, как в контенте, при переключении она опускала весь div. - person Tricky12; 06.09.2013