CODEWITHSUNDEEP
jqueryjquery-ui
Kenny
Kenny

Reputation: 152

Simple jquery function isn't working

I'm stumped. I added a simple jquery function to the footer.php of my wordpress theme, but it doesn't seem to do anything. I tried an even simpler hide(); function and that didn't fire either. I can't get any jquery to fire at all, but the jquery library is definitely loading into my theme (it's based on twentyeleven). Here's my code:

</footer><!-- #colophon -->
</div><!-- #page -->

<script>
jQuery(document).ready(function ($) {
    $(".sub-menu").effect("highlight", {}, 3000);
}); 
</script>


<?php wp_footer(); ?>

</body>
</html>

I loaded the jquery ui core effects via my functions.php and see that it shows up in the site's resources when I use the Chrome inspector, so the highlight(); function should work.

Here's the page it should be working on

Why wouldn't the jquery script be running?

Thanks!

Kenny

EDIT

Final code is the following (Sadly, I don't know how to make the effect recursive through the <li> elements, but this does the job):

<script>
jQuery(document).ready(function ($) {
setTimeout(function() {
    $('.sub-menu li:first-child').animate({ marginRight: '15px' }, 500);
    $('.sub-menu li:first-child').animate({ marginRight: '0' }, 500);
    setTimeout(function() {
    $('.sub-menu li:nth-child(2)').animate({ marginRight: '15px' }, 500);
    $('.sub-menu li:nth-child(2)').animate({ marginRight: '0' }, 500);
    }, 400);
    setTimeout(function() {
    $('.sub-menu li:nth-child(3)').animate({ marginRight: '15px' }, 500);
    $('.sub-menu li:nth-child(3)').animate({ marginRight: '0' }, 500);
    }, 800);
    setTimeout(function() {
    $('.sub-menu li:nth-child(4)').animate({ marginRight: '15px' }, 500);
    $('.sub-menu li:nth-child(4)').animate({ marginRight: '0' }, 500);
    }, 1200);
}, 3000);

}(jQuery)); 
</script>

Upvotes: 1

Views: 180

Answers (2)

Andrew
Andrew

Reputation: 2780

Your script is not running because the $ argument is not defined. The solution is to add (jQuery) after the closing curly braces:

jQuery(document).ready(function ($) {
    $(".sub-menu").effect("highlight", {}, 3000);
}(jQuery));

This technique is used when multiple libraries (potentially ones that also use $) are present. See Using jQuery with Other Libraries for details.

Now, it looks like you want to animate the sub-menu list items one by one with a 400 ms delay. You can simplify your code by using .each() and .delay():

jQuery(document).ready(function ($) {

    // iterate over li in .sub-menu
    // NOTE: the overall initial delay is 3000 ms
    $('.sub-menu li').delay(3000).each(function (i) {

        // the effect sets margin-right to 15px, then to 0 after completion
        // NOTE: the delay increases by 400 ms for each item
        $(this).delay(i * 400).animate({ marginRight: '15px' }, 500, 'linear', function () {
            // this is the 'complete' callback function
            $(this).animate({ marginRight: '0' }, 500);
        });

    });

}(jQuery));

The second part of the animation (setting margin-right to 0) is defined in the complete argument of .animate(), which eliminates one .animate() call. The i * 400 delay creates the cascading effect that you want.

Upvotes: 1

blackcatweb
blackcatweb

Reputation: 1013

It looks like '.effect()' doesn't do anything to any element on your page. I haven't figured out why (I thought it was a CSS evaluation order problem originally, but it's not).

Is this an acceptable alternative?

$('.sub-menu').animate({ backgroundColor: '#ffff99' }, 3000);

Upvotes: 1

Related Questions