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

我正在尝试使用jQuery制作一个简单的动画。这是代码

单击文档中的任意位置时，将显示一个项目符号。我使用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);
})  

$（文档）。单击（函数（）{
var bult=$（''）{
班级：'blt'
}).附于（“#pln”）
活鳞茎({
左：'+=510px'
}, 2000);
})  

---

另外，我对jquery不是很在行

您应该只在第一次创建DIV

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

$（文档）。单击（函数（）{
var bult=$（“.blt”）；
如果（bult.length==0）{
bult=$（“”，{class:'blt'}）.appendTo（“#pnl”）；
}
制作动画（{
左：“+510px”
}, 2000);
});

您应该只在第一次创建DIV

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

$（文档）。单击（函数（）{
var bult=$（“.blt”）；
如果（bult.length==0）{
bult=$（“”，{class:'blt'}）.appendTo（“#pnl”）；
}
制作动画（{
左：“+510px”
}, 2000);
});

这样做：

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

$（'body'）。在（'click'，function（）上{
变量blt=$（''）；
$（blt）.appendTo（$（'平面'）；
$（blt）。设置动画({
左：'+=510px'}，2000，函数（）{
//动画完成后删除创建的元素
$（blt.remove（）；
});
});

这样做：

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

$（'body'）。在（'click'，function（）上{
变量blt=$（''）；
$（blt）.appendTo（$（'平面'）；
$（blt）。设置动画({
左：'+=510px'}，2000，函数（）{
//动画完成后删除创建的元素
$（blt.remove（）；
});
});

---

采用了一种不同的方法，使用css动画：

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

#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 });
  });

});

$（函数（）{
var$pln=$（'平面'）；
$（文档）。在（'单击'，函数（）上）{
变量$div=$（''）
.附于（$pln）；
setTimeout（函数（）{
$div.fadeOut（100，函数（）{
$div.remove（）；
})
}, 300);
})
.on（'keydown'，函数（e）{
var动画道具；
e、 预防默认值（）；
开关（e.which）{
案例37：
animationProps={左：“-=10px”}
打破
案例38：
animationProps={top::'-=45px}
打破
案例39：
animationProps={左：“+=45px”}
打破
案例40：
animationProps={top:+=45px}
打破
}
$pln.stop（）
.animate（animationProps，{持续时间：150，队列：false}）；
});
});

采用了一种不同的方法，使用css动画：

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

#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 });
  });

});

$（函数（）{
var$pln=$（'平面'）；
$（文档）。在（'单击'，函数（）上）{
变量$div=$（''）
.附于（$pln）；
setTimeout（函数（）{
$div.fadeOut（100，函数（）{
$div.remove（）；
})
}, 300);
})
.on（'keydown'，函数（e）{
var动画道具；
e、 预防默认值（）；
开关（e.which）{
案例37：
animationProps={左：“-=10px”}
打破
案例38：
animationProps={top::'-=45px}
打破
案例39：
animationProps={左：“+=45px”}
打破
案例40：
animationProps={top:+=45px}
打破
}
$pln.stop（）
.animate（animationProps，{持续时间：150，队列：false}）；
});
});

Thansk这真的很有帮助，但如果你把飞机向下移动，它将无法正常工作ansk这真的很有帮助，但如果你把飞机向下移动，它将无法正常工作。很抱歉问这个问题，但你能帮我检测碰撞吗？我真的被卡住了，或者你可以在这里回答我的问题@Akshay。我只是要求你发布另一个问题，然后在这里留下另一条评论和它的URL。这个问题是大约三个小时前提出的，我为它提供了一笔赏金。很抱歉问这个问题，但你能帮我检测碰撞吗？我严重陷入了这个问题，或者你可以在这里回答我的问题@Akshay。我只是要求你发布另一个问题，然后在这里留下另一条评论和它的URL。这个问题是大约三个小时前提出的，我将为此提供一笔赏金。。