jquery - 使用 jquery 隐藏/添加元素并转换其余元素？ (也许用 css？)

Question

我不确定这是否可行。 我今天有 5 个 DIV，在单击它们上方的数字后，jQuery 将检查单击的数字和 fadeIn() 或 fadeOut() 框的数量。

我想做的是，当盒子四处移动时(因为 display: flex 和 justify-content: space-around)它们有平滑的 转换。

我尝试过使用 css 转换来实现，但没有成功。

谁能帮帮我？

这是 JSFiddle:https://jsfiddle.net/0k1xj3d5/1/

HTML:

<div class="wrapper">
    <div class="num" rel="1">1</div>
    <div class="num" rel="2">2</div>
    <div class="num" rel="3">3</div>
    <div class="num" rel="4">4</div>
    <div class="num" rel="5">5</div>
</div>

<div class="wrapper">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
    <div class="box-4"></div>
    <div class="box-5"></div>
</div>

CSS:

.wrapper {
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
}

[class^=box] {
    width: 50px;
    height: 50px;
    background-color: blue;
}

.num {
    width: 50px;
    height: 50px;
    background-color: green;
}

jQuery:

$('.num').on('click', function(){
    var quant = $(this).attr('rel');

    for(var i=1; i<=5 ;i++){
      if(i <= quant){
        if(!$('.box-' + i).is(':visible')){
          $('.box-' + i).fadeIn();
        } 
      } else {
        $('.box-' + i).fadeOut();
      }
    }
});

Answer 1

我的方式——https://jsfiddle.net/sergdenisov/qgyeay0v/10/ :

HTML:

<div class="wrapper">
    <div class="num" rel="1">1</div>
    <div class="num" rel="2">2</div>
    <div class="num" rel="3">3</div>
    <div class="num" rel="4">4</div>
    <div class="num" rel="5">5</div>
</div>

<div class="wrapper">
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
    <div class="wrapper__item wrapper__item_shown">
        <div class="box"></div>
    </div>
</div>

CSS:

.wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    margin-bottom: 50px;
}

.wrapper__item {
    -webkit-flex: 0.00001;
    flex: 0.00001;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: all 1s;
    transition: all 1s;
}

.wrapper__item_shown {
    -webkit-flex: 1;
    flex: 1;
}

.box {
    width: 50px;
    height: 50px;
    background-color: blue;
    margin: 0 auto;
}

.num {
    width: 50px;
    height: 50px;
    background-color: green;
}

JS:

$('.num').on('click', function(){
    var quant = $(this).attr('rel');
    var $wrapperItems = $('.wrapper__item');

    for (var i = 1; i <= 5; i++) {
        var $wrapperItem = $wrapperItems.eq(i - 1);

        if (i <= quant) {
            $wrapperItem.addClass('wrapper__item_shown');
        } else {
            $wrapperItem.removeClass('wrapper__item_shown');
        }
    }
});