Jquery glisser de haut en bas que dois-je faire?

je ne connais pas jquery donc toute aide serait appréciée, j'ai du code, (je ne me souviens pas d'où) qui montre une partie du contenu et vous permet ensuite de montrer plus ou moins. Ce que je voudrais que le code fasse est exactement ce qu'il fait maintenant, mais au lieu de simplement montrer/cacher, je veux qu'il glisse vers le bas et révèle plus ou moins de contenu.Jquery glisser de haut en bas que dois-je faire?

CODE ENTIER

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Show more less</title> 

<style media="screen" type="text/css"> 
#mytext {width:260px;height:200px;overflow:hidden;} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
var adjustheight = 200; 
$("#adjust").toggle(function() { 
$('#mytext').css('height', 'auto').css('overflow', 'visible'); 
$(this).text("less"); 
}, function() { 
$('#mytext').css('height', adjustheight).css('overflow', 'hidden'); 
$(this).text("more"); 
}); 
}); 
</script> 

</head> 

<body> 

<div id="mytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Quisque iaculis tincidunt tortor. Nulla turpis dui, gravida non, 
varius quis, molestie sit amet, justo. Vestibulum sed elit. 
Duis lobortis odio quis nisi. Praesent enim. Sed auctor commodo lectus. 
In eget augue a nulla auctor interdum. 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
Nulla enim turpis, commodo at, feugiat nec, dapibus et, odio. Cras enim risus, sagittis eget, 
ultrices quis, eleifend vel, risus. Cras a felis eu urna ornare vulputate. 
Pellentesque viverra, lacus vitae tincidunt accumsan, nisi metus feugiat felis, 
sed placerat est dolor et eros. Duis cursus. Maecenas sollicitudin, lorem vitae 
placerat eleifend, dui elit imperdiet tellus, at convallis sapien orci sed pede.</div> 
<a href="#" id="adjust">more</a> 

</body> 
</html>

son actuellement contrôlée en changeant la hauteur de la css un moyen d'animer ce? Merci

Source

2009-08-06 Anonymous

Heres un excellent moyen d'obtenir ce que je voulais achive. En affichant une certaine quantité de texte en haut dans une div et être capable d'afficher et de masquer l'autre moitié du texte avec un effet de diapositive.

http://sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/

Source

2009-08-08 18:33:30

Avez-vous jeté un oeil à la méthode slideToggle?

// Open & Close myDiv. Animation take 1 second (1000 ms) 
$('#myDiv').slideToggle(1000);

Modifier: Voici une meilleure réponse.

Dans votre HTML, ayez un div pour les choses que vous voulez toujours voir, et un autre div pour les choses cachées.

<div id="alwaysShow">Here is an introduction to what I want to say.</div> 
<a href="#" id="adjust">More...</a> 
<div id="sometimesShow">Here is some more info that you don't always care about</div>

De cette façon, vous pouvez basculer simplement sometimesShow. Ce n'est pas exactement ce que vous avez demandé, mais je pense que cela va résoudre votre problème.

Source

2009-08-06 15:48:57

Ouais il devient fou, je ne suis pas sûr où placer le code, il l'anime, mais ne marche pas glisser semblent regarder à la hauteur, etc. et glisse complètement pour qu'il n'y ait pas de texte visible. –

Pour clarifier, quand il glisse, vous voulez toujours voir le top 200px de la div (comme spécifié dans votre CSS)? –

oui quand la page 200px de contenu devrait être visible, puis en appuyant sur "plus" devrait glisser vers le bas pour révéler tout le contenu dans "mytext" div, plus de texte change en "moins" et quand on appuie dessus devrait glisser mais afficher 200px de contenu . –

Type de ferroutage hors de la réponse de Matt, voici votre HTML:

<div id="alwaysShow">Here is an introduction to what I want to say.</div> 
<a href="#" id="adjust">More...</a> 
<div id="sometimesShow">Here is some more info.</div>

Votre jQuery devrait ressembler à ceci:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#adjust").toggle(function() { 
      $("#sometimesShow").slideDown("fast"); 
      $(this).text("Less..."); 
     }, function() { 
      $("#sometimesShow").slideUp("fast"); 
      $(this).text("More...");     
     }); 
    }); 
</script>

Source

2009-08-06 16:54:38 Jason

Tout cela est génial, mais ce serait encore mieux si l'on pouvait utiliser un div sans séparer le contenu, voir ce que quelqu'un d'autre trouve, donc merci pour votre temps et vos efforts. –

Ceci est un code simple qui aiderait ..

copie le code à l'intérieur balise Script

$(document).ready(function() { 
      $('#buttontag').click(function(){ 
       //alert("Here I am .."); 
       $('#mytext').slideToggle("fast"); 
      }); 
     });

Ajouter ce dans la balise body ..

<button id="buttontag"> Slide it .. </button>

Ce serait certainement travailler .. mais vous devez inclure le fichier jquery ..

http://code.jquery.com/jquery-1.9.1.min.js

Source

2013-02-15 16:08:41 Gifted

Jquery glisser de haut en bas que dois-je faire?

Répondre

Questions connexes