随机移动图像

Question

I have this code that supposedly makes the image move around the page but It doesnt moves can someone identify the error.

Thanks.

My HTML :

<div id="container"> <span id="random"><img src="poke.png"></span> </div>

My JS :

<script>
function moveDiv() {
    var $span = $("#random");

    $span.fadeOut(270, function() {
        var maxLeft = $(window).width() - $span.width();
        var maxTop = $(window).height() - $span.height();
        var leftPos = Math.floor(Math.random() * (maxLeft + 1))
        var topPos = Math.floor(Math.random() * (maxTop + 1))

        $span.css({ left: leftPos, top: topPos }).fadeIn(270);
    });
};

moveDiv();
setInterval(moveDiv, 270);
</script>

My CSS :

<style>span { display: inline-block; position: absolute;}</style>

Answer 1

try with below code, it might help you.

 function moveDiv() { var $span = $("#random"); $span.fadeOut(270, function() { var maxLeft = $(window).width() - $span.width(); var maxTop = $(window).height() - $span.height(); var leftPos = Math.floor(Math.random() * (maxLeft + 1)) var topPos = Math.floor(Math.random() * (maxTop + 1)) $span.css({ left: leftPos, top: topPos }).fadeIn(270); }); }; moveDiv(); setInterval(moveDiv, 270); 

 span { display: inline-block; position: absolute;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="container"> <span id="random"><img src="http://hiroki.jp/wp-content/uploads/2011/06/google-chrome-logo-100x100.png"></span> </div> 

Answer 2

As you can see here your code works fine. The reason why in your case the code is not working is beacuse the script is not running when all of the DOM is loaded.

You can wrap your script code in document ready

$(document).ready()

Like the above comments mentioned, this ensures the code is ran when the DOM is loaded.

Answer 3

It works just include the jQuery into your code

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

You can wrap your script code in document ready too.

 $(document).ready()