Comment faites glisser un div caché en haut/en bas sur le clic d'un bouton?

Je veux réaliser ce type de descendre le long de l'exception au lieu de sur le vol stationnaire, je pense que j'ai besoin d'une sorte de script qui déclenche le glisser vers le bas sur cliquez sur et puis cliquez à nouveau pour déclencher l'inverse glisser vers le haut. Je vais avoir un div c'est caché (en haut: -400px; au-dessus du haut de la page) et lorsque le bouton est cliqué avec de glisser et de s'asseoir au top: 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;
}

Ici est un travail de violon http://jsfiddle.net/8ZFMJ/2/ - toute aide serait appréciée.

J'ai essayé d'utiliser slideToggle cependant, cela crée un "l'expansion de" l'effet qui n'est pas le type de glisser vers le bas je veux atteindre.

Merci beaucoup.

maintenant, vous voulez exactement ce qui se passe sur :hover ne se produit qu'à cliquer?
Si vous utilisez jQuery, vous pouvez simplement utiliser le JavaScript onClick fonction, pouvez-vous pas?
Ouais exact de style de glisser vers le bas. J'ai regardé slideToggle et crée un près de l'expansion de l'effet qui n'est pas ce que je veux.

OriginalL'auteur user2498890 | 2014-02-27

12

Essayer cette http://jsfiddle.net/webcarvers/8ZFMJ/34/

supprimer ce:
```
.one:hover + .two {
    top: 0px;
}
```
ajouter ce 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"});
    }
});
});
```
Merci! c'est exactement ce dont j'ai besoin. Encore une question, si j'ai besoin de 2 boutons, un pour glisser vers le bas l'un pour glisser vers le haut comment modifier ce code? Encore une fois merci beaucoup.
[mise à jour]Voici la mise à jour de tripoter mon ami: jsfiddle.net/webcarvers/8ZFMJ/35
N'oubliez pas d'accepter mes ans.
Oubliez pas que je le vois, merci beaucoup pour votre aide.
j'ai changé. Consultez-le maintenant!

OriginalL'auteur Mayank Tripathi
6

presque le même (comme l'autre réponse) travaille également si vous avez plus d'un conteneur:

http://jsfiddle.net/8ZFMJ/32/
```
$('.one').on('click',function(){
    $(this).next('.two').slideToggle();
});
```
OriginalL'auteur caramba
2

Vous pouvez utiliser slideToggle():
```
$('.one').click(function() {
    $('.two').slideToggle();    
})
```
Violon Démo

Vous pouvez également modifier la vitesse d'animation en utilisant $('.two').slideToggle('fast'); ou $('.two').slideToggle('slow');
Merci pour votre réponse, j'ai vu cela mais je ne veux pas le contenu de 'développer' je veux que le tout à de glisser. C'est dur pour moi de l'expliquer. Si vous regardez la différence entre le sur le vol stationnaire et votre violon vous devriez voir ce que je veux dire et de l'effet que je veux créer.

OriginalL'auteur Felix
1

Je pense que vous avez besoin d'utiliser du jQuery slideToggle() de la fonction, avez-vous essayé?

Salut, merci pour votre réponse, oui j'ai vu ça, mais il crée une sorte de "l'expansion" en effet je veux que l'ensemble de la div à glisser vers le bas comme dans le violon, j'ai inclus à la partie supérieure.

OriginalL'auteur b4rbika
1

Vous devez utiliser .slideToggle()
```
$(".one").on('click',function(){
    $(".two").slideToggle();
});
```
Démo

Salut, merci pour votre réponse, oui j'ai vu ça, mais il crée une sorte de "l'expansion" en effet je veux que l'ensemble de la div à glisser vers le bas comme dans le violon, j'ai inclus dans le haut

OriginalL'auteur Dhaval Marthak
0

Vous pouvez le faire en utilisant uniquement 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;
}
```
Vous pouvez également supprimer le lien de style à votre goût, de sorte qu'il ressemble de texte ordinaire.

et comment voulez-vous fermer <div class="two">après il est visible?
Ce ne semble pas être le travail en coulisse?
cliquez en dehors de la div, comme un simple notification de style popup. C'est la seule limite à l'utilisation des CSS
de travail pour moi, FF 30.0 pour Mac. Fonctionne aussi sur mon dépassée Chrome
n'ai pas trouver moi-même, ce serait bien d'ajouter un état actif ou smthing

OriginalL'auteur Kroltan

Vous devez vous connecter pour publier un commentaire.