Question

我有一个类.box的矩形，在里面，我有一个类.btn的按钮。我需要以这样的方式产生效果，当我点击按钮时，矩形应该从中心分成2个，一个分区应该向左移动而其他分区应该向右移动。我如何使用jquery或javascript做到这一点？或者有没有办法不使用jquery或javascript？

这是我的HTML：

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

这是我的CSS：

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

Answer 1

您无法拆分HTML元素。但是，您可以添加其他元素，如果您想要实现的只是一些视觉效果。点击.btn后，您可以toggleClass()点击它们，以便width减少。结合css transition属性，它将被设置为动画。

请参阅my fiddle

Answer 2

你可以制作两个div。我不认为一个人可以：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你可以使用伪元素获得一些乐趣......而且没有脚本

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

Answer 4

以下是jQuery中的一种方法，从您在问题中提到的html开始，然后添加...... .clone()，大量.css()和短划线.animate()：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用javascript将div拆分为2

4 个答案: