1

我有一个由 php 循环动态生成的事件列表的 div。我希望 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.
           });
     )};
});

当再次单击链接时，我还想让它动画回到它的初始高度。有人？？？谢谢！！

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 创建 click 事件并让它调用一个函数来检查 .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 回答