擴展箱-整理整齊

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事件並相應地對寬度進行了動畫處理。

UPDATED 小提琴的鏈接在這里 。

代碼段如下：

 $(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要求實現點擊框的擴展和縮小。 我已經更新了代碼片段和小提琴，以實現OP的要求。 基本上，我所做的只是添加一個點擊計數器，然后在元素上進行偶數編號的點擊，操縱要動畫的寬度。

希望這也會有所幫助。 快樂編碼:)

Answer 2

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

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