div not being created using jquery that has a specified class

Question

I am trying to make a simple animation using jQuery. This is the code http://codepen.io/akshay-7/pen/Ggjxwb .

When clicked anywhere in the document a bullet appears. I made a div using html but I want to create a div and perform the animation using jQuery at each click is this possible?

This is the jQuery

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

This is the code I tried but it doesn't work

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

P.S I am not that good with jquery

score 2 · Answer 1 · answered Dec 27 '14 at 09:47

You should only create the DIV the first time.

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

score 1 · Answer 2 · edited Dec 27 '14 at 12:15

1

Do it like this:

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

edited Dec 27 '14 at 12:15

Nikunj Madhogaria

2,139
2
23
40

answered Dec 27 '14 at 09:56

jogesh_pi

9,762
4
37
65

Thansk that was really helpful but if you move the plane down it won't work properly – Akshay Dec 27 '14 at 12:22

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

took a bit of a different approach, using css animations instead:

DEMO 1

plane

DEMO 2

sweet

EDIT: This may be closer to what you're going for:

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

});

sorry for asking this but can you help me in detecting the collision i am seriously stuck at that http://codepen.io/akshay-7/pen/Ggjxwb or you can just answer my question here http://stackoverflow.com/questions/27704823/jquery-collision-not-working-properly — Akshay, Dec 30 '14 at 13:37
@Akshay probably. I just ask that you post another question and then leave another comment here with the URL for it. — Todd, Dec 30 '14 at 14:14
This question http://stackoverflow.com/questions/27704823/jquery-collision-not-working-properly was asked about three hours ago i am offering a bounty for it.. — Akshay, Dec 30 '14 at 15:04

div not being created using jquery that has a specified class

3 Answers3

DEMO 1

DEMO 2