Question

I am trying to use jQuery to animate the full-page (html) background by clicking the menu buttons. I created a small try-out in W3school TryIt Editor, and this worked. However, when I want to use it on my own site, it doesn’t work (and the jQuery stops working in general – the alert doesn’t show anymore as well).Is there anyone that can help me with this?

This is the error Firebug gives me:

SyntaxError: missing ) after argument list
[Break On This Error]   

$('.html').animate(left:'0px')

script.js?mcplzp (line 32, col 35)

This is my actual JS code:

$('.html').animate(left:'0px'

    (function ($, Drupal) {
        $("<link/>", {
       rel: "stylesheet",
       type: "text/css",
       href: "../css/pages.css"
    }).appendTo("head");

    if (jQuery) {  
        alert('jQuery is loaded!');  
        };

    $(document).ready(function()
    {
        $('.menu-704').click(function() 
            {
                $('.html').animate(left:'0px'
            });
    });

    $(document).ready(function()
    {
        $('.menu-797').click(function() 
            {
                $('.html').animate(left:'=+1250px'
            });
    });

    $(document).ready(function()
    {
        $('.menu-359').click(function() 
            {
                $('.html').animate(left:'=+1250px'
            });
    });

    $(document).ready(function()
    {
        $('.menu-796').click(function() 
            {
                $('.html').animate(left:'=+1250px'
            });
    });


    })(jQuery, Drupal);

Answer 1

You may want to try the following, which I’ve tested and it seems to work.

1) Your animate method should be called like this:

$('.html').animate({left:'+=1250px'})

Not like this:

$('.html').animate(left:'=+1250px')

The CSS properties and values you’re passing (in this case ‘left’ positioning) should be wrapped in bracket {} notation.

2) Try replacing:

=+

With:

+=

3) if you’re targeting the html element, you may not want to use a class of ‘html’ on the element itself. Since you’ll only have one html element per document, try doing this instead:

$('html').click(etc...

4) If you implement the changes outlined in 1 – 3, this should fix your issue. However, once resolved you may want to clean-up the code a bit which will certainly help in debugging issues next time ’round. You only need one $(document).ready(function(){}); within which you’ll set all of your $(‘foo’).click() event listener stuff.

So instead of this:

$(document).ready(function()
{
    $('.menu-797').click(function() 
    {
        $('.html').animate({left:'+=1250px'});
    });
});

$(document).ready(function()
{
    $('.menu-359').click(function() 
    {
        $('.html').animate({left:'+=1250px'});
    });
});

$(document).ready(function()
{
    $('.menu-796').click(function() 
    {
        $('.html').animate({left:'+=1250px'});
    });
});

Simplify to this:

$(document).ready(function()
{
    $('.menu-797,.menu-359,.menu-796').click(function() 
    {
        $('.html').animate({left:'+=1250px'});
    });
});