1

拡張ボックスをクリックする単純なアニメーション機能を作成しました。可能であればプラグインを使用したくないです。

現時点では、次のようになっています。

$('#one').css("height", "22");
    $('#t1').click(function() {
      if ($('#one').hasClass("extended")) {
        $('#one').stop(true, true).animate({height: '22px'},500);
        $('#one').removeClass("extended");
        $('#a1').stop(true, true).animate({opacity: '1'},500);
      } else {
        $('#one').animate({height: '120px'},500);
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
      }
});

しかし、問題は、div 内のテキストがオーバーフローした場合、テキストの高さに設定するにはどうすればよいですか? これが理にかなっていることを願っています！

HTML:

<div class="rightBox">
    <div id="one" style="overflow:hidden;">
        <h3><a href="#" id="t1">Availability</a></h3><p id="a1"><a href="#" title="Slide Down"><img src="<?php echo home_url(); ?>/img/arrow.png" alt="Arrow" /></a></p>
        <?php include 'availability.php'; ?>
    </div>
</div><!-- END.#rightBox -->
4

3 に答える 3

3

私がこれにアプローチした方法は、すべての子の高さを計算し、その特定の高さまでアニメーションを開始することです。下記参照。

このjsFiddleを参照してください。

<div class="rightBox">
    <div id="one" style="overflow:hidden;">
        <h3><a href="#" id="t1">Availability</a></h3><p id="a1"><a href="#" title="Slide Down"><img src="/img/arrow.png" alt="Arrow" /></a></p>
        <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <span>More Sample text</span>        
    </div> </div>​

jQuery/JavaScript

$('#one').css({"height": "22px", "background-color": "red"});

    $('#t1').click(function() {

      if ($('#one').hasClass("extended")) {
        $('#one').stop(true, true).animate({height: '22px'},500);
        $('#one').removeClass("extended");
        $('#a1').stop(true, true).animate({opacity: '1'},500);
      } else {
        var height = 0;//initialize a height
        $(this).closest("div").children().each(function(){//this loops through each child element
           height += $(this).outerHeight(true);//this sums up the height
        });
        $('#one').animate({height: height + 'px'},500);//set the height
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
      } });​
于 2012-10-26T14:15:34.693 に答える
1

HTML にアクセスできる場合は、コンテンツ#oneを別のコンテンツでラップし、<div>その高さを動的に取得できます。

例: http://jsfiddle.net/88u76/

その例では、コードで実行できる連鎖も示しているため$( '#one' )、毎回 DOM ルックアップを引き起こす呼び出しを継続的に行う必要はありません。それよりも、それを再利用できる変数に設定することをお勧めします。

var $one = $( '#one' );
于 2012-10-26T14:20:52.227 に答える
0

テキストをラッパーに入れないのはなぜですか？ap または div のいずれかで、.slideToggle() を実行しますか? 不要な計算をすべて削除しますか?

<div class="rightBox">
    <div id="one" style="overflow:hidden;">
        <h3><a href="#" id="t1">Availability</a></h3><p id="a1"><a href="#" title="Slide Down"> .. </a></p>
        <p class="content" style="display:none">afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
            afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
            afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
            afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
            afasdfasdfasdfasdfasdf
        as
        df
        asd <br />
        f
        asd
        f
        asd <br />
        f
        asd
        f
        asdf <br />
        </p>
    </div>
</div><!-- END.#rightBox -->​

Javascript:

$('#t1').click(function() {
          if ($('#one').hasClass("extended")) {
            $('#one p.content').slideToggle();
              //$('#one').stop(true, true).animate({height: '22px'},500);
            $('#one').removeClass("extended");
            $('#a1').stop(true, true).animate({opacity: '1'},500);
          } else {
            //$('#one').animate({height: 'auto'},500);
            $('#one p.content').slideToggle();
              $('#one').addClass("extended");
            $('#a1').animate({opacity: '0'},300);
          }
    });​

http://jsfiddle.net/NxwL8/

于 2012-10-26T14:28:33.270 に答える