Question

This is what the bottom of hy head looks like:

$('#hello').mouseenter(function() {
$(this).effect("bounce", { times:1, distance:10 }, 800);
});

I’m linking to jQuery 1.7.2 and jQuery UI 1.8. I’m not getting any errors, but when I hover over the #hello div, nothing is happening.
Any ideas?

Thanks!

Answer 1

You jQuery code seems fine, So it’s most likely You have missed the document ready block

So add the doc ready handler like

$(function() {

    $('#hello').mouseenter(function() {
        $(this).effect("bounce", {
            times: 1,
            distance: 30
        }, 800);
    });   
});​

It will ensure that that code will fire when DOM is ready.

If you just use $("#hello").mouseenter(...) without any doc ready block, then there is a chance when this code will run, when there isn’t any element with id hello in DOM yet. So $("#hello") will return an empty set and mouseenter binding won’t work.

An example markup when it won’t work without doc ready block,

.
.
.
<script type="text/javascript">
    $("#hello").mouseenter(....);
</script>
.
.
.
.
<div id="hello">Blah Blah....</div>

As browsers, interprets the markup sequentially, it will execute the js code as soon as it face it. And when it executes the JS block here, it hasn’t yet parsed the <div id="hello"> tag yet, as it appears after the JS block, So they are not in DOM at that moment.

So for the above case $("#hello") is empty and hence event binding won’t work. So it’s always safe to put all your JS code inside document ready block like

$(function){
   // put all your JS code here
});

Read more http://api.jquery.com/ready/