Question

我有一个div，它包含一个由php循环动态生成的事件列表。我希望div有一个初始高度，只显示三个事件。然后，当您单击链接时，它会扩展为全宽以显示所有事件。说：

<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.
           });
     )};
});

当再次点击链接时，我还希望将动画恢复到初始高度。任何人???谢谢！

Answer 1

试试这个：

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

Answer 2

我将@ 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创建click事件，让它调用一个函数来检查.events-wrap的高度，并确定要设置的高度。

Answer 3

试试这个：

$(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');
       });

});
});

on jsfiddle

根据内容设置Div的高度

3 个答案: