2でjavascriptを使ってdivを塗りつぶします

Question

私はクラス "ボックス"を持つ四角形を持っています。その中には "btn"というクラスのボタンがあります。ボタンをクリックするとそのような効果を出す必要があります。四角形は中央から2に分割し、1つの除算は左に移動し、他の除算はright.howに移動する必要があります。jqueryを使用して行いますか？またはjavascript？jqueryまたはjavascriptを使用してそれを行う方法はありますか？

<div class="box"> 
<button class"btn"> click </button> 
</div> 

、これは私のCSSです：感謝 が、これは私のhtmlです

.box{ 
    width:500px; 
    height:500px; 
    background-color:royalblue; 
} 

Answer 1

ここでは、あなたの質問に提示したhtmlで始まるjQueryの1つのアプローチがあります。 NDそして... .clone()の散水を追加し、.css()の多くと.animate()のダッシュ：

$(document).ready(function(){ 
 

 
    $('button').click(function() { 
 
     $('.box button').remove(); 
 
     $('.box').clone().appendTo('.box').attr('class','halfbox left'); 
 
     $('.left').css({'position': 'absolute', 'display': 'block', 'top': '0', 'left': '0', 'width': '250px', 'height': '500px', 'backgroundColor': 'royalblue'}); 
 
     $('.left').clone().appendTo('.box').attr('class','halfbox right'); 
 
     $('.right').css({'left': 'auto', 'right': '0'}); 
 
     $('.box').css('backgroundColor', 'transparent'); 
 
     $('.left').animate({left: '-300px'}, 800); 
 
     $('.right').animate({right: '-300px'}, 800); 
 
    }); 
 

 
});

.box { 
 
position: relative; 
 
display: block; 
 
margin: 24px auto; 
 
width: 500px; 
 
height: 500px; 
 
background-color: royalblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="box"> 
 
<button type="button"> click </button> 
 
</div>

Answer 2

あなたがHTML要素を分割することはできません。しかし、達成したいのは視覚的な効果があれば、他の要素を追加することができます。 .btnをクリックするとtoggleClass()になりますので、widthが減少します。 css transitionプロパティと組み合わせると、アニメーション化されます。

は、次の2つのdiv年代を作ることができmy fiddle

Answer 3

を参照してください。私は1つでそれが可能だとは思わない：

$('.btn').on('click', function() { 
 
    $('#left').animate({ 
 
    left: '-100%' 
 
    }, 2000); 
 
    $('#right').animate({ 
 
    right: '-100%' 
 
    }, 2000); 
 
});

.container { 
 
    font-size: 0; 
 
    position: relative; 
 
    text-align: center; 
 
    display: inline-block; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.btn{ 
 
    position: absolute; 
 
    z-index: 1; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right:0; 
 
    margin: auto; 
 
    height:30px; 
 
    width: 100px; 
 
} 
 
#left, 
 
#right { 
 
    background-color:royalblue; 
 
    width: 50%; 
 
    height: 100px; 
 
    position: relative; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='container'> 
 
    <button class="btn">click</button> 
 
    <div id="left"></div> 
 
    <div id="right"></div> 
 
</div>

Answer 4

あなたは疑似要素を持ついくつかの楽しみ...なしスクリプトを持つことができ

.container { 
 
    position: relative; 
 
    text-align: center; 
 
    height: 200px; 
 
    line-height: 200px; 
 
} 
 
input { 
 
    display: none 
 
} 
 
.btn{ 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 40px; 
 
    width: 100px; 
 
    line-height: 40px; 
 
    z-index: 1; 
 
    background: lightgray; 
 
} 
 
.container::before, 
 
.container::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 100%; 
 
    background: blue; 
 
    transition: width 1s; 
 
} 
 
.container::before { 
 
    left: 0; 
 
} 
 
.container::after { 
 
    right: 0; 
 
} 
 
input:checked + .container::before, 
 
input:checked + .container::after { 
 
    transition: width 1s; 
 
    width: 0; 
 
} 
 
input:checked + .container label { 
 
    transition: opacity 1s; 
 
    opacity: 0.3; 
 
}

<input id="inp_btn" type="checkbox"> 
 
<div class='container'> 
 
    <label for="inp_btn" class="btn">click</label> 
 
</div>