web-dev-qa-db-fra.com

Comment faire glisser une div cachée vers le haut/bas en cliquant sur un bouton

Je veux réaliser ce type de diapositive, sauf qu'au lieu de survol, je pense avoir besoin d'un script qui déclenche la diapositive au clic, puis à nouveau pour déclencher la diapositive inverse. Je vais avoir un div qui est caché (en haut: -400px; au-dessus du haut de la page) et lorsque le bouton est cliqué avec glisser vers le bas et assis en haut: 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;
}

Voici un violon qui fonctionne http://jsfiddle.net/8ZFMJ/2/ - toute aide serait la bienvenue. 

J'ai essayé d'utiliser slideToggle, mais cela crée un effet "en expansion" qui n'est pas le type de diapositive que je souhaite obtenir.

Merci beaucoup. 

jqueryhtmlcssanimationslide
8
user2498890

Essayez ceci http://jsfiddle.net/webcarvers/8ZFMJ/34/

enlève ça:

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

ajoutez ceci avec 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"});
    }
});
});
12
Mayank Tripathi

presque identique (comme l'autre réponse) fonctionne également si vous avez plus d'un conteneur:

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

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

Vous pouvez utiliser slideToggle ():

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

Fiddle Démo

2
Felix

Vous devez utiliser .slideToggle()

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

Démo

1
Dhaval Marthak

Je pense que vous devez utiliser la fonction slideToggle () de jQuery, avez-vous essayé cela?

1
b4rbika

Vous pouvez le faire en utilisant du CSS pur: 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;
}

Vous pouvez également supprimer le style de lien à votre goût, afin qu'il ressemble à du texte normal.

0
Kroltan