Question

我正在构建需要扩展盒子的东西 - 这很好我有这个工作。但是，如果你看一下这个FIDDLE，你会发现它有点乱。我希望有一种方法可以扩大他们坐的位置，这样他们就不会跳来跳去？因此，第三个框的左侧会比右侧更快地展开，它看起来是在填充父容器吗？

$(".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给出的另一个版本。我已经绑定了click事件并相应地设置了宽度。

更新fiddle is here 的链接。

代码段如下：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13; 的 UPDATE ::

抱歉延迟更新。 OP要求在点击时实现盒子的扩展和缩小。我已经更新了代码片段和小提琴以实现OP所要求的内容。基本上我所做的只是添加一个点击计数器，在元素上偶数编号点击，动画的宽度被操纵。

希望这也有帮助。 快乐编码：）

Answer 2

something like this? just show hide with "slow" property. 

https://jsfiddle.net/ugpg3gk3/4/

扩展盒 - 整理

2 个答案: