没有使用具有指定类的 jquery 创建 div

Question

我正在尝试使用 jQuery 制作一个简单的动画。这是代码http://codepen.io/akshay-7/pen/Ggjxwb。

单击文档中的任意位置时，会出现一个项目符号。我使用 html 制作了一个 div，但我想创建一个 div 并在每次点击时使用 jQuery 执行动画这可能吗？

这是 jQuery

$(document).click(function() {
  $('.blt').animate({
    left: '+=510px'
  }, 2000);
})

这是我试过的代码，但它不起作用

$(document).click(function() {
  var bult = $('<div></div>', {
    class: 'blt'
  }).appendTo('#pln')
  bult.animate({
    left: '+=510px'
  }, 2000);
})  

P.S 我对 jquery 不太擅长

Answer 1

您应该只在第一次创建 DIV。

$(document).click(function() {
    var bult = $(".blt");
    if (bult.length == 0) {
        bult = $("<div>", { class: 'blt' }).appendTo("#pnl");
    }
    bult.animate( {
        left: '+510px'
    }, 2000);
});

Answer 2

采取了一些不同的方法，改为使用 css 动画：

DEMO 1

DEMO 2

编辑：这可能更接近您的目标：

#holder{
  overflow:hidden;
  width:600px;
  height:500px;
  padding:25px;
  background: url('http://www.backgroundlabs.com/wp-content/uploads/2013/02/clouds-seamless-background.jpg') repeat;
  animation: bground 4s linear infinite;
}

#plane {
  position: relative;
  animation: fly 2s 0s infinite; 
  animation-timing-function: ease-in-out;
}
.pln {
  width:100px;
  position:relative;
}

.blt {
  position: absolute;
  margin-top:-15px;
  width:10px;
  height:5px;
  background:red;
  border-radius: 0px 30px 30px 0px;
  animation: bullets 0.4s 0s 1;
  animation-timing-function: ease-in;
}

@keyframes bullets {
  from { left: 55px; }
  to { left: 510px; }
}

@keyframes fly {
  from { transform: translate(0%, 0%);}
  50% { transform: translate(0%, 8%) }
  to { transform: translate(0%, 0%); }
}

@keyframes bground {
    to { background-position: 0 0; }
    from { background-position: 500px 0; }
}

jquery

$(function() {
  var $pln = $('#plane');

  $(document).on('click', function(){

    var $div = $('<div class="blt" />')
      .appendTo($pln);
    
    setTimeout(function() {
      $div.fadeOut(100, function() {
        $div.remove();
      })
    }, 300);

  })

  .on('keydown', function(e) { 
    var animationProps;

    e.preventDefault();

    switch(e.which) {
      case 37:
        animationProps = { left: "-=10px" }
        break;      
      case 38:
        animationProps = { top: "-=45px" }
        break;
      case 39:
        animationProps = { left: "+=45px" }
        break;        
      case 40:
        animationProps = { top: "+=45px" }
        break;
    }

    $pln.stop()
      .animate(animationProps, { duration: 150, queue: false });
  });

});

Answer 3

这样做：

$('body').on('click', function(){
  var blt = $('<div class="blt"/>');

  $(blt).appendTo($('#plane'));
  $(blt).animate({
    left:'+=510px'},2000, function() {
        // Remove Created element after Animation Complete
        $(blt).remove();
  });
});

DEMO