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?

mcorkum mcorkum · Accepted Answer · 2012-07-11T05:04:42

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);
        }
    );
});

Jquery Function conflicts with Wordpress

2 Answers