Jquery Function conflicts with Wordpress

Question

in functions.php of my wordpress site i have this code to call jquery:

    function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');

However, this code conflicts with this jquery code:

$(function() {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-55px'  /* para não elevar muito o separador*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-130px'  /* para baixar o separador para o sitio original*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});

i'm sure this is the problem because if i call http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js directly in the head of the page the plugin works. I'm triying to avoid using jquery.noConflict to avoid problems with other jquery plugins on the same page.

Any hint?

weird...I've always done it like that and it works for me.

elclanrs
– elclanrs

2012-07-10 23:52:56 +00:00
Commented Jul 10, 2012 at 23:52 — elclanrs
– elclanrs, Commented Jul 10, 2012 at 23:52

mcorkum · Accepted Answer · 2012-07-11 05:04:42Z

0

Where are you loading the script?

If it's in the footer, try this:

    (function($) {
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-55px'  /* para não elevar muito o separador*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-130px'  /* para baixar o separador para o sitio original*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
})( jQuery );

If it's in the header, try this:

jQuery(document).ready(function( $ ) {  
    $('#menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-55px'  /* para não elevar muito o separador*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 400);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-130px'  /* para baixar o separador para o sitio original*/
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );
});

answered Jul 11, 2012 at 5:04

mcorkum

4482 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1511579 Over a year ago

it's in the header but didn't work. i ended calling the jquerycorefile directly in the page and calling the enqueue_script to the plugins and this way is working.

mcorkum · Accepted Answer · 2012-07-11 13:30:14Z

0

Glad that it worked for you, but you are way better off using wp_enqueue.

Check out this article http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

You can also try replacing the "$" selectors with "jQuery". Wordpress has a number of libraries included as a part of core and the $ is used for more then just jQuery.

answered Jul 11, 2012 at 13:30

mcorkum

4482 silver badges11 bronze badges

1 Comment

user1511579 Over a year ago

During my search i ended in that page too. Well, for now i will mantain this code. But if i have problems that suggestion will be the first i will try. Thanks for the help.

Collectives™ on Stack Overflow

Jquery Function conflicts with Wordpress

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related