Question

这是我在单击spawn按钮时创建新div的一个非常简单的示例。

jquery的

$(document).ready(function()
{
    $('.spawndivs').click(function(){
        var my_div = document.createElement('div');
        my_div.className = 'movingdiv';
        document.getElementById('container').appendChild(my_div); 
    });

    $('#reset').click(function(){
        $('#container').empty();
    });
});

如何让这些div在创建时顺利地从右侧滑入其静止位置？

Answer 1

你不需要额外的j来动画你的div。

只需使用这样的关键帧：

$(document).ready(function()
{
    $('.spawndivs').click(function(){
        var my_div = document.createElement('div');
        my_div.className = 'movingdiv';
        document.getElementById('container').appendChild(my_div); 
    });
    
    $('#reset').click(function(){
        $('#container').empty();
    });
});

body{margin:0px;}
.spawndivs
{
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: gray;
    float: left;
    cursor: pointer;
    text-align: center;
    margin-bottom:5px;
}

.container
{
    display: block;
    background-color: blue;
    height: 50px;
    width: 100%;
    margin-bottom:5px;
}

.movingdiv
{
    height: 30px;
    width: 50px;
    background-color: red;
    display: inline-block;
    margin: 10px;
    animation-duration: 3s;
    animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: -200px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
  }

  to {
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
#reset-box{width:100%;clear:left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spawndivs">
    <p>spawn!</p>
</div>

<div id="container"></div>

<div id="reset-box"><button id="reset">Reset</button></div>

jsFiddle链接：http://jsfiddle.net/AndrewL32/3fLn9v4e/2/

Answer 2

您可以使用.animate来执行元素的某些动画。

<强> JS

  $(document).ready(function()
  {
      $('.spawndivs').click(function(){
          var my_div = $('<div></div>');
          my_div.addClass('movingdiv');

          my_div
          .appendTo('#container')
          .animate({
            left: "+=20",
            opacity: 1
          });
      });

      $('#reset').click(function(){
          $('#container').empty();
      });
  });

在position: relative css类中添加.movingdiv。

<强> CSS

.movingdiv
{
    position: relative;
    opacity: 0;
    height: 30px;
    width: 50px;
    background-color: red;
    display: inline-block;
    margin: 10px;
}

您可以看到fiddle

如何让这些添加的div从右侧滑入？

2 个答案: