CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Altay Mazlum
Altay Mazlum

Reputation: 442

I can't move my div

I'm always having trouble with the combination 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.com/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>

Upvotes: 1

Views: 1509

Answers (3)

Shaunak D
Shaunak D

Reputation: 20626

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 recommend the CSS way :hover if its just about mouseover event. If there is more functionality to add, this is better.

Upvotes: 5

Adam Kaczmarek
Adam Kaczmarek

Reputation: 146

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.

Upvotes: 5

baao
baao

Reputation: 73211

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>

Upvotes: 7

Related Questions