javascript - 扩展框 - 整理

Question

我正在构建需要扩展框的东西 - 这很好，我可以正常工作。然而，如果你看看这个FIDDLE你会看到它有点乱。我希望有一种方法可以扩展它们所在的盒子，这样它们就不会跳来跳去？那么盒子 3 的左侧会比右侧膨胀得更快，而且它看起来会填满父容器？

$(".grow").click(function(){

var growEl = $(this),
    curHeight = $(this).height(),
    curWidth = $(this).width(),
    curTop = growEl.offset().top,
    newHeight = 200,
    newWidth = 860,
    actHeight = $(this).attr("height"),
    actWidth = 200,
    newMargin = curTop - (newHeight -curHeight)/2;

if(newMargin < 0){
    newMargin = 0;   
}

if (curWidth < 860){

    $('.grow').not(this).hide();
    $(this).animate({/*height:newHeight+"px", */width:newWidth+"px"/*, marginTop:newMargin + 'px'*/}, function() {
        $(this).find('.description2').fadeIn('fast');
    });

} else if (curWidth == 860) {

    $(this).find('.description2').fadeOut('fast');
    $(this).animate({/*height:actHeight+"px", */width:actWidth+"px"/*, marginTop:newMargin + 'px'*/},function() {$('.grow').not(this).show()});
    /*$('.grow').not(this).show();*/

};

})

我希望这是有道理的:)

Answer 1

这是我使用 jquery 给出的另一个版本。我已绑定(bind)点击事件并相应地设置宽度动画。

已更新 fiddle is here 的链接.

代码片段如下:

$(function() {
  var clickCount = 0;
  var icons = $('.social-container > li').on({
    click: function() {
      clickCount++;
      if ((clickCount % 2) > 0) {
        icons.stop().animate({
          'width': '0%'
        }, 400);
        var self = $(this);
        self.stop().animate({
          'width': '100%'
        }, 400);
      } else {
        icons.stop().animate({
          'width': '25%'
        }, 400);
        clickCount = 0;
      };
    }
  });
});

ul.social-container {
  width: 400px;
  height: 69px;
  display: block;
  list-style-type: none;
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
ul.social-container > li {
  list-style: none;
  float: left;
  padding: 10px 0px;
  width: 25%;
  text-align: center;
}
ul.social-container li.facebook {
  background: #3b5998;
  left: 0px;
}
ul.social-container li.twitter {
  background: #00aced;
  left: 100px;
}
ul.social-container li.instagram {
  background: #517fa4;
  left: 200px;
}
ul.social-container li.pinterest {
  background: #cb2027;
  left: 300px;
}
ul.social-container li img {
  width: 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="background">
  <ul class="social-container">
    <li class="facebook">
      <img src="http://static.tumblr.com/5u1fog0/mAMnbyjiz/facebook.png" alt="" />
    </li>
    <li class="twitter">
      <img src="http://chem.duke.edu/sites/chem.duke.edu/themes/dukechem/images/twitter.png" alt="" />
    </li>
    <li class="instagram">
      <img src="http://thebasementla.com/mobile/images/iconIg.png" alt="" />
    </li>
    <li class="pinterest">
      <img src="http://www.boguewatch.com/images/pinterestIcon.png" alt="" />
    </li>
  </ul>
</div>

更新::

抱歉延迟更新。 OP要求在点击时实现框的扩展和收缩。我已经更新了代码片段和 fiddle 来实现 OP 的要求。基本上我所做的就是添加一个点击计数器，并在元素上进行偶数次点击时，操纵要设置动画的宽度。

希望这也能有所帮助。 快乐编码:)