JQueryを上下にスライドさせたらどうすればいいでしょうか？

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

  •  11-09-2019
  •  | 
  •  

質問

私はjqueryに精通していないので、助けていただければ幸いです。コンテンツの一部を表示し、多かれ少なかれ表示できるようにするコードがいくつかあります（どこからのものか思い出せません）。

コードに実行させたいことは、現在実行していることとまったく同じですが、単に表示/非表示にするのではなく、上下にスライドして多かれ少なかれコンテンツを表示したいと考えています。

コード全体

<!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で高さを変更することで制御されていますが、これをアニメーション化する方法はありますか?ありがとう

役に立ちましたか？

解決 3

相続人は私がachiveしたいたものを達成するための素晴らしい方法。 1つのDIVにおける上部のテキストの特定の量を表示し、スライド効果のテキストの残りの半分を示し、非表示にすることができることによる。

ます。http： //sim.plified.com/2008/09/15/sliding-content-from-a-partial-height-with-jquery/する

他のヒント

あなたは 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を切り替えることができます。

この方法で。そのあなたはを求めたが、私はそれがあなたの問題を解決するとは思わない、まさにます。

マットの答えのオフに便乗の

種類、ここではあなたの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>

あなたのjQueryのは次のようになります：

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

これは役に立つ簡単なコードです。

Scriptタグ内のコードをコピーするだけです

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top