Jquery slide up and down私は何をすべきですか？

私はjqueryに精通していないので、助けていただければ幸いです。コンテンツの一部を表示して、多かれ少なかれ表示できるコードがあります。Jquery slide up and down私は何をすべきですか？

私はコードを実行したいと思っていますが、これは現在の動作ですが、表示/非表示の代わりに、スライドして多かれ少なかれコンテンツを表示したいのです。

コード全体

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

その現在CSSでこれをアニメーション化する方法を高さを変えることにより制御？ありがとう

出典

2009-08-06 Anonymous

HERESに私はachiveしたいたものを達成するための素晴らしい方法：

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

あなたのjQueryのは、次のようになります。 1つのdivの上部に一定量のテキストを表示し、スライドの効果でテキストの残りの半分を表示したり隠したりすることができます。

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

出典

2009-08-08 18:33:30

slideToggleの方法を見ましたか？

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

編集：ここでは、より良い答えです。

あなたのHTMLには、常に見たいもの用のdivと、隠されているもの用のdivがあります。

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

この方法で、ちょうどsometimesShowを切り替えることができます。あなたが求めているものではありませんが、あなたの問題を解決すると思います。

出典

2009-08-06 15:48:57

うん、それはどこのコードを入れてイムわからない、狂気、それはスライドそれをアニメーション化するが、見ているように見えるdoesntの高さなどで表示され、テキストが表示されないように完全にスライドします。 –

明確にするために、スライドするとdivの上位200ピクセル（CSSで指定されたもの）が表示されますか？ –

yeaページが200pxのコンテンツを表示する必要がある場合、「more」を押すと「mytext」divのすべてのコンテンツが表示され、さらに多くのテキストが「less」に変更され、押したときに200pxのコンテンツが表示されます。 –

マットの答えのオフに便乗の種類は、ここにあなたのHTMLです：

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

出典

2009-08-06 16:54:38 Jason

これらはすべて素晴らしいですが、コンテンツを分離せずに1つのdivを使用して完成させることができれば、他の人が出てくるものを見て、あなたの時間と労力に感謝します。 –

これは役立つだろう単純なコード..

ただ、スクリプトタグ内のコードをコピーし

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

bodyタグ内にこれを追加..です

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

これは間違いなく ...働くだろうが、あなたはjqueryのファイルを含める必要が..

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

出典

2013-02-15 16:08:41 Gifted

Jquery slide up and down私は何をすべきですか？

答えて

関連する問題