Как сдвинуть скрытый div вверх / вниз по нажатию кнопки?

Я хочу достичь этого типа слайда вниз, за исключением того, что вместо наведения я думаю, что мне нужен какой-то скрипт, который запускает слайд вниз по щелчку, а затем нажмите еще раз, чтобы вызвать обратный слайд вверх. У меня будет div, который скрыт (вверху: - 400px; над верхней частью страницы), и когда кнопка нажата с помощью слайда вниз и сидит вверху: 0;

HTML-код

<div class="container"><div class="one">Hover me to reveal new div</div>
<div class="two">I slid!<br>And I am higher than the div before me...</div>
</div>

в CSS

.container {
overflow:hidden;
height: 60px;
}

.one {
position: relative;
top: 0;
background-color: lightblue;
z-index: 1;
}

.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}

.one:hover + .two {
top: 0px;
}

вот рабочая скрипка http://jsfiddle.net/8ZFMJ/2/ - любая помощь будет оценена.

Я попытался использовать slideToggle, однако это создает эффект "расширения", который не является типом скольжения вниз, которого я хочу достичь.

большое спасибо.

8
animation css html jquery slide

6 ответов

попробуйте это http://jsfiddle.net/webcarvers/8ZFMJ/34/

удалить этого:

.one:hover + .two {
    top: 0px;
}

добавить это с помощью jQuery Js

$(document).ready(function(){
var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"top": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"top": "-40px"});
    }
});
});
11

почти то же самое (как и другой ответ), Просто также работает, если у вас есть более одного контейнера:

http://jsfiddle.net/8ZFMJ/32/

$('.one').on('click',function(){
    $(this).next('.two').slideToggle();
});
6

можно использовать slideToggle():

$('.one').click(function() {
    $('.two').slideToggle();    
})

Скрипка Демо

2

Я думаю, вам нужно использовать функцию slideToggle() jQuery, вы пробовали это?

1

вам нужно использовать .slideToggle()

$(".one").on('click',function(){
    $(".two").slideToggle();
});

демо

1

Вы можете сделать это, используя чистый CSS: http://jsfiddle.net/8ZFMJ/33/

HTML-код:

<div class="container">
    <a href="#" class="one">Hover me to reveal new div</a>
    <div class="two">
        I slid!<br>
        And I am higher than the div before me...
    </div>
</div>

CSS:

.one:focus + .two {
    top: 0px;
}

вы также можете удалить стиль ссылки на свой вкус, поэтому он выглядит как обычный текст.

0