JQuery se deslizan hacia arriba y hacia abajo, ¿qué debo hacer?

StackOverflow https://stackoverflow.com/questions/1239798

  •  11-09-2019
  •  | 
  •  

Pregunta

im no están familiarizados con jQuery por lo que se agradece cualquier ayuda, tengo algo de código, (no puedo recordar donde desde) que muestra parte del contenido y luego se le permite mostrar más o menos.

Lo que me gustaría hacer el código es exactamente lo que hace ahora, pero en lugar de mostrar / ocultar, quiero que se deslice hacia abajo y hacia arriba revelando más o menos contenido.

todo el código 

<!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>

Actualmente su controlada cambiando la altura en el css cualquier forma de animar esto? Gracias

¿Fue útil?

Solución 3

Aquí está una gran manera de lograr lo que estaba queriendo achive. Al mostrar una cierta cantidad de texto en la parte superior en un div y ser capaz de mostrar y ocultar la otra mitad del texto con un efecto deslizante.

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

Otros consejos

¿Ha echado un vistazo a la slideToggle método? 

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

Editar : He aquí una respuesta mejor

.

En el código HTML, tienen un div para las cosas que siempre quiere ver, y otro div por las cosas que están ocultas. 

<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 esta forma puede alternar simplemente sometimesShow. No es exactamente lo que pidieron, pero creo que va a resolver su problema.

Por Tipo de cuestas fuera de la respuesta de Matt, aquí está el código 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>

Su jQuery debe tener este aspecto: 

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

Este es un código simple que ayudaría ..

Sólo tienes que copiar el código dentro de la etiqueta de secuencias de comandos 

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

Añadir esta dentro del cuerpo de la etiqueta .. 

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

Esto sin duda trabajar .. pero hay que incluir el archivo de jQuery ..

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top