未使用具有指定類的jquery創建div

Question

我想使用jQuery製作一個簡單的動畫。這是代碼http://codepen.io/akshay-7/pen/Ggjxwb。

當在文檔中的任何位置單擊時，會出現一個項目符號。我做了一個div使用HTML，但我想創建一個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); 
}) 

PS我不使用jQuery好

Answer 1

採取了一些不同的方法，使用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 2

您應該只創建DIV第一次。

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

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