Omhoog/omlaag schuiven met JQuery tot een bepaalde hoogte - kan dit?

Is het mogelijk om een ​​div-op te schuiven (sluiten), maar niet helemaal?

Ik bedoel, schuift op maar laat een beetje van die div zien, is dat mogelijk?

Bij voorbaat dank, mem

6
Misschien wilt u alleen de hoogte animeren/wijzigen.
toegevoegd de auteur jezza-tan, de bron

3 antwoord

Iets als dit kan werken:


$("#div").toggle(
function(){
   $("#div").animate( { height:"500px" }, { queue:false, duration:500 });
},
function(){
   $("#div").animate( { height:"50px" }, { queue:false, duration:500 });
});

In plaats van de 500px kan dit alleen de originele grootte van de div zijn, en de 30px kan zo veel zijn als je wilt laten zien wanneer het is bedoeld om te worden verborgen.

8
toegevoegd
Hartelijk bedankt! Twee dingen: 1) We moeten altijd de oorspronkelijke hoogte van de div verklaren? Ik vraag dit omdat ... de hoogte kan variëren afhankelijk van de inhoud. 2) Als we hierna het kleine gedeelte dat we net hebben bezield, willen laten vervagen, komt het wel goed, ja?
toegevoegd de auteur MEM, de bron
Heel erg bedankt voor je tijd. Heel duidelijk. ;)
toegevoegd de auteur MEM, de bron
Hier is een fiddle die laat zien dat het verschillende hoogtes kan toestaan ​​als het wordt gedeclareerd in een variabele: jsfiddle.net/Skooljester/HdQSX En uitzweten na animatie zou geen probleem moeten zijn.
toegevoegd de auteur jezza-tan, de bron

De betere manier om div te openen naar de oorspronkelijke hoogte is met slideDown (). Het probleem is dat deze functie div nodig heeft om te worden verborgen voordat deze kan worden geopend. De volgende manier is een beetje lelijk maar werkt goed:

$("#test").toggle(
function(){
   $("#test").css('height', 'auto').hide().slideDown('fast');
},
function(){
   $("#test").animate( { height:'50px' }, { queue:false, duration:500 });
});
2
toegevoegd

Ik raad niet aan om de animatiemethode van jQuery te gebruiken omdat het soms buggy is in sommige browsers. Animeren van de dia met CSS-overgangen is een betere keuze (volgens mij), door de div-hoogte of max-hoogte in te stellen.

CSS:

.expandable {
  max-height: 3em;
  overflow: hidden;
  transition: max-height .3s;
}

klik op, stel max. hoogte in met jQuery:

$(.someSelector).css('max-height', expandedHeight);

Verwijder vervolgens de stijl wanneer er opnieuw op wordt geklikt:

$(.someSelector).attr('style', '');

Je kunt dit demovoorbeeld bekijken

1
toegevoegd