JQuery deslizar para cima e para baixo o que devo fazer?

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

  •  11-09-2019
  •  | 
  •  

Pergunta

im não familiarizado com jQuery por isso qualquer ajuda seria apreciada, eu tenho algum código, (não consigo lembrar de onde), que mostra parte do conteúdo e, em seguida, permite que você mostre mais ou menos.

O que eu gostaria que o código para fazer é exatamente o que ele faz agora, mas em vez de apenas mostrar / esconder, eu quero que ele deslize para baixo e para cima revelando mais ou menos conteúdo.

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

sua actualmente controlada alterando a altura no css alguma maneira de animar este? Graças

Foi útil?

Solução 3

Aqui está uma ótima maneira de conseguir o que eu estava querendo achive. Ao exibir uma certa quantidade de texto na parte superior em um div e ser capaz de mostrar e ocultar a outra metade do texto com um efeito de slide.

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

Outras dicas

Você já tomou uma olhada no método slideToggle ? 

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

Editar :. Aqui está uma resposta melhor

Em seu HTML, tenho uma div para as coisas que você sempre quer ver, e outra div para as coisas que estão escondidas. 

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

Desta forma, você pode alternar apenas sometimesShow. A sua não é exatamente o que você pediu, mas eu acho que vai resolver seu problema.

Kind of verticalização fora da resposta de Matt, aqui é o seu 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>

Seu jQuery deve ficar assim: 

<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 é um código simples que ajudaria ..

Basta copiar o código dentro marca de script 

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

Adicione esta dentro da tag body .. 

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

Isso iria funcionar .. mas você tem que incluir o arquivo jquery ..

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

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top