I'm always having trouble with the bination of CSS and JQuery. Can someone tell me what i'm doing wrong here? I just want to move my div. Thanks all for the solutions, I'd like to know a little further. How can i move it more than once in different directions?

<script src=".1.4.min.js"></script>
<script>
    jQuery(document).ready(function () {
        jQuery("#hello").mouseenter(function () {
            jQuery("#hello").animate({ left: '150px' }, slow);

        });

    });
</script>


<div id="hello">
    Hello World!
</div>
<style>
    #hello{
        color: gray;
        background-color: gold;
        width: 125px;
        height: 125px;
        position: fixed;
        left: 350px;
        top: 350px;
        border-width: 2px;
        border-color: lavender;
        text-align: center;

    }
</style>

I'm always having trouble with the bination of CSS and JQuery. Can someone tell me what i'm doing wrong here? I just want to move my div. Thanks all for the solutions, I'd like to know a little further. How can i move it more than once in different directions?

<script src="http://code.jquery./jquery-2.1.4.min.js"></script>
<script>
    jQuery(document).ready(function () {
        jQuery("#hello").mouseenter(function () {
            jQuery("#hello").animate({ left: '150px' }, slow);

        });

    });
</script>


<div id="hello">
    Hello World!
</div>
<style>
    #hello{
        color: gray;
        background-color: gold;
        width: 125px;
        height: 125px;
        position: fixed;
        left: 350px;
        top: 350px;
        border-width: 2px;
        border-color: lavender;
        text-align: center;

    }
</style>

• javascript
• jquery
• html
• css

• 3 Did you try to set #hello to position: relative or position: absolute? – sqe Commented Jul 2, 2015 at 12:08
• I made a fiddle for you – Liam Commented Jul 2, 2015 at 12:11
• You don't need jQuery. – Ram Commented Jul 2, 2015 at 12:12
• Thanks for the alternative ways also. – Altay Mazlum Commented Jul 2, 2015 at 12:15
• 1 @Vohuman You don't need jQuery, but your example isn't working very well. Move the mouse around over that div. It restarts the animation every time the mouse position changes. You should use the CSS animate – Josh Stevenson Commented Jul 2, 2015 at 12:16

3 Answers 3

Your div needs a position set when using left, right, top or bottom css propertiy, so there will be no change even though your code seems correct.

Try to set a position to your div, for example relative.

<style>
#hello{
        color: gray;
        background-color: gold;
        width: 125px;
        height: 125px;
        position: fixed;
        left: 350px;
        top: 350px;
        border-width: 2px;
        border-color: lavender;
        text-align: center;
        position: relative;
    }
</style>

<script>
jQuery(document).ready(function () {
        jQuery("#hello").mouseenter(function () {
            jQuery("#hello").animate({ left: '150px' }, 'slow');

        });

    });
</script>

If You are using slow/fast option You need to put 'slow' into brackets

jQuery("#hello").animate({ left: '150px' }, 'slow');

You can set animation time with milliseconds without brackets.

The duration parameter of your animate() is undefined (Uncaught ReferenceError: slow is not defined).

It should be either "slow"

 jQuery("#hello").animate({ left: '150px' }, "slow");

or

 var slow = 200;
 jQuery("#hello").animate({ left: '150px' }, slow);

Fiddle (with error)

Fiddle (Updated)

I would remend the CSS way :hover if its just about mouseover event. If there is more functionality to add, this is better.