자바 스크립트를 사용하여 div에서 SPlit div

Question

나는 "box"클래스의 사각형을 가지고 있고 그 안에 "btn"클래스의 버튼이 있습니다. 버튼을 클릭 할 때와 같은 효과를 낼 필요가 있습니다. 사각형은 중심에서 2로 나눠야하고 한 부분은 왼쪽으로 이동해야하고 다른 부분은 right로 이동해야합니다. jquery를 사용하여 어떻게해야합니까? 또는 자바 스크립트? jquery 또는 자바 스크립트를 사용하여 밖으로 할 수있는 방법은 무엇입니까? 덕분에 이 내 HTML입니다 :

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

이 내 CSS입니다 :

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

Answer 1

다음은 질문에서 제시 한 html으로 시작하는 jQuery의 한 가지 접근 방식입니다.

$(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 속성과 결합하면 애니메이션이 적용됩니다.

는 my fiddle

Answer 3

당신은이 div 's을 (를) 만들 수를 참조하십시오. 나는 하나가 가능하다고 생각하지 않습니다

$('.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>