1

PHPループによって動的に生成されるイベントのリストを含むdivがあります。div に初期の高さを持たせて、たとえば 3 つのイベントだけを表示したい。次に、リンクをクリックすると、全幅に展開されてすべてのイベントが表示されます。言う：

<div id = "container">
  <div class="events-wrap">
  <!-- php loop that generates the events -->
  </div>
  <a href="#" class="showall">Show All</a>
</div>

したがって、すべてのイベントが表示されるように、高さを .showall をクリックして div の高さまでアニメーション化する必要があります。divをアニメーション化するための最初の失敗した試みは.

$(document).ready(function() { 
    $('.events-wrap').css('height','30%');
    $('.showall').click(function(e) {
         e.preventDefault();
          $('.events-wrap').animate({
                height: '100%'
              }, 500, function() {
                // Animation complete.
           });
     )};
});

また、リンクが再度クリックされたときにアニメーションを元の高さに戻したいと思います。誰でも??? ありがとう！！

4

3 に答える 3

2

これを試して：

http://jsfiddle.net/hmartiro/yd7Kq/30/

于 2012-08-31T18:52:15.693 に答える
1

スライディングアニメーションを提供するために、@haykの回答を少し拡張しました。jQueryには、パーセントの高さのアニメーション化に問題があります。

$(document).ready(function() { 
    $('.events-wrap').data('fullHeight', $('.events-wrap').height());
    $('.events-wrap').css('height','100px').css('overflow','hidden');
    $('.events-wrap').data('minimizedHeight', $('.events-wrap').height());
    $('.showall').click(function(e) {
        e.preventDefault();
        clickShowAll();
    });
});

function clickShowAll() {
    var eventWrap = $('.events-wrap');
    var h;
    if(eventWrap.height() != eventWrap.data('fullHeight')) {
        h = eventWrap.data('fullHeight');
    }
    else
    {
        h = eventWrap.data('minimizedHeight');
    }

    eventWrap.animate({
        height: h
            }, 500, 'swing', function() {
                //Animation complete...
            }
       );
}

ドキュメントが読み込まれると、.events-wrapの高さを設定する前に、後で取得するためにjQueryデータを使用して完全な高さを保存します。次に、最小化された高さに設定します。次に、.dataを使用してそれを保存します。

.showallのクリックイベントを作成し、.events-wrapの高さをチェックして、アニメートする高さを決定する関数を呼び出すようにします。

于 2012-08-31T19:58:05.690 に答える
0

これを試して ：

$(document).ready(function() {
$('.events-wrap').css('height','100px').css('overflow','hidden');
$('.showall').click(function(e) {
     e.preventDefault();
   r = $('.events-wrap');
   h = r.children('ul').outerHeight();
    t=$(this);
   if(r.data('state')!='all')       
      r.animate({
            height: h
          }, 500, function() {
              t.text('show less');
              r.data('state','all');
       });
    else
        r.animate({
            height: '100px'
          }, 500, function() {
                t.text('show all');
              r.data('state','less');
       });

});
});

jsfiddleで

于 2012-08-31T19:09:48.660 に答える