Jquery scorrere su e giù che cosa devo fare?

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

  •  11-09-2019
  •  | 
  •  

Domanda

im non ha dimestichezza con jQuery in modo che qualsiasi aiuto sarebbe apprezzato, ho qualche codice, (non ricordo da dove) che mostra parte del contenuto e quindi consente di mostrare più o meno.

Quello che vorrei il codice di fare è esattamente ciò che fa ora, ma invece di mostrare / nascondere, voglio farlo scivolare verso il basso e per rivelare più o meno contenuti.

l'intero codice 

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

la sua attualmente controllata variando l'altezza nel css alcun modo per animare questo? Grazie

È stato utile?

Soluzione 3

Ecco un ottimo modo per ottenere ciò che mi mancava di achive. Con la visualizzazione di una certa quantità di testo nella parte superiore in una div ed essere in grado di mostrare e nascondere l'altra metà del testo con un effetto di scorrimento.

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

Altri suggerimenti

Hai dato un'occhiata alla slideToggle metodo? 

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

Modifica : Ecco una risposta migliore

.

Nel codice HTML, avere un div per la roba che si desidera sempre vedere, e un altro div per le cose che sono nascoste. 

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

In questo modo è possibile passare solo sometimesShow. La sua non è esattamente quello che hai chiesto, ma penso che risolverà il problema.

Tipo di piggybacking off di risposta di Matt, ecco il codice 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>

Il jQuery dovrebbe essere simile a questo: 

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

Questo è un semplice codice che avrebbe aiutato ..

Basta copiare il codice all'interno di tag script 

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

Aggiungi questo all'interno del tag body .. 

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

Questo sarebbe sicuramente lavorare .. ma è necessario includere il file jquery ..

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top