Как анимировать изображения в круговом Div

Question

Я сделал это до сих пор https://jsfiddle.net/XqqtN/6146

var left = $('#coolDiv').offset().left; 
$("#coolDiv").css({left:left}).animate({"left":"0px"}, "slow"); 

Теперь я хочу, чтобы сделать это таким образом, что Существует Circualar Div с некоторой границей так же, как в jsfiddle ссылки

& 3 Цветы Изображения должны быть уже там.

и изображение одного цветка, одушевляющее или брошенное в каком-то случайном месте в пределах этого кругового div.

Надеюсь, что у вас есть точка.

Answer 1

jquery должно быть чем-то вроде этого. Надеюсь, это поможет. Нажмите HERE найти скрипку

$(document).ready(function(){ 
    $("#coolDiv").animate({"right":"0px"}, "slow"); 
    $("#coolDiv").animate({"right":"493px"}, "slow"); 
    $("#coolDiv").animate({"top":"26px"}, "slow"); 
     }); 

Answer 2

Я просто сделал dumyy. Попробуйте с этой анимацией, работает отлично здесь

$(document).ready(function(){ 
 
    
 

 
    for(i=0; i < 100; i++){ 
 
    var animate = $('#coolDiv'); 
 
    animate.animate({left:'98%'}, 1000); 
 
    animate.animate({top:'75%'}), 1000; 
 
    animate.animate({left:'0'}), 1000; 
 
    animate.animate({top:'0'}), 1000; 
 
    } 
 
    
 
})

#coolDiv { 
 
    position: absolute; 
 
    top: 0; 
 
    left:0; 
 
    width:20px; 
 
    height:20px; 
 
} 
 
.round { 
 
    position:relative; 
 
}

<div class="round" id="main" style="border:2px solid black;"> 
 
    <div style="margin:25px;"> 
 
    <img id="img_id" src="http://i.imgur.com/TLqV50g.jpg" width="20px" height="20px;" /> 
 
    <img src="http://i.imgur.com/TLqV50g.jpg" width="20px" height="20px;" /> 
 
    <img src="http://i.imgur.com/TLqV50g.jpg" width="20px" height="20px;" /> 
 
    </div> 
 
    <div id="coolDiv"> 
 
    <img src="http://i.imgur.com/TLqV50g.jpg" width="20px" height="20px;" /> 
 
    </div> 
 
</div> 
 
    
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>