Hi,

I've used the jquery.bgpos.js script to animate on mouseOver a link background-image position, normally it's supposed to create a slide effect
When I put this script in a new page, it works! >> http://dirtyballet.com/TESTING/hover.html, The same script in another page, it doesn't work anymore :$ >> http://dirtyballet.com/TESTING/index-home.html, on my first box (photos/videos) the background-position animation doesn't work as expected.
I suppose there's another script in my page that interferes with this one but I can't figure out what's wrong...
The background-animation script is located in the head section while the other script (boxes animation script) is located at the bottom juste before the closing body tag.

Here's the code of the page :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Dirty Ballet 2011 Official Website - Dance Event of The Year - Finest Belgian Dance Meeting &amp; Workshops</title><META NAME="description" CONTENT="Dirty Ballet is the Dance Event of The Year in Belgium, the finest Belgian Dance Meeting &amp; Workshops. Dirty Ballet Awards Ceremony will take place on the 1st of May 2011 in the Cirque Royal, Brussels"> <META NAME="keywords" CONTENT="Dirty Ballet, Ballet, Dance Event, Belgian Dance, Cirque Royal, Dance Meeting, Dance Workshop, Dance Schools"> <link rel="stylesheet" type="text/css" href="css/normal.css"/><link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/><link rel="stylesheet" href="Scripts/reveal/reveal.css"><script type="text/javascript" src="Scripts/reveal/jquery-1.4.4.min.js"></script><script type="text/javascript" src="Scripts/reveal/jquery.reveal.js"></script><script type="text/javascript" src="Scripts/jquery.bgpos.js"></script><script src="Scripts/swfobject_modified.js" type="text/javascript"></script><script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-764092-6']);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script><script type="text/javascript">$(document).ready(function(){    // Menu    $('#test').css({backgroundPosition: '0px 0px'}).hover(function() {        $(this).stop().animate({backgroundPosition:"0px -81px"}, {duration:1500});    },function() {        $(this).stop().animate({backgroundPosition :"0px 0px"}, {duration:1500});    });    });    </script></head><body><div id="wrapper">    <div id="container">        <div id="frame-top"><img src="images/frame-top.png" alt="dirty ballet" width="1024" height="40" /></div>        <div id="frame-bottom"><img src="images/frame-bottom.png" alt="dirty ballet" width="1024" height="40" /></div>            <div id="littleBoxes" class="littleBoxes">                <div class="boxlink bg1" style="top:0px;left:0px;">                    <a id="test" href="#">PHOTOS/VIDEOS</a>                    <div class="boxcontent">                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                             sed do eiusmod tempor incididunt ut labore et dolore magna                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation                            ullamco laboris nisi ut aliquip ex ea commodo consequat.                        </p>                    </div>                </div>                <div class="boxlink bg2" style="top:0px;left:146px;">                    <a href="">WINNERS</a>                    <div class="boxcontent">                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                             sed do eiusmod tempor incididunt ut labore et dolore magna                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation                            ullamco laboris nisi ut aliquip ex ea commodo consequat.                        </p>                    </div>                </div>                <div class="boxlink bg3" style="top:0px;left:292px;">                    <a href="">WORKSHOPS</a>                    <div class="boxcontent">                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                             sed do eiusmod tempor incididunt ut labore et dolore magna                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation                            ullamco laboris nisi ut aliquip ex ea commodo consequat.                        </p>                    </div>                </div>                                <div class="boxlink bg4" style="top:81px;left:0px;">                    <a href="">TICKETTING</a>                    <div class="boxcontent">                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                            sed do eiusmod tempor incididunt ut labore et dolore magna                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation                            ullamco laboris nisi ut aliquip ex ea commodo consequat.                        </p>                    </div>                </div>                <div class="boxlink bg5" style="top:81px;left:146px;">                    <a href="">TRAILER</a>                    <div class="boxcontent">                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                            sed do eiusmod tempor incididunt ut labore et dolore magna                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation                            ullamco laboris nisi ut aliquip ex ea commodo consequat.                        </p>                    </div>                </div>                <div class="boxlink bg6" style="top:81px;left:292px;">                    <a href="">PARTY</a>                    <div class="boxcontent">                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                            sed do eiusmod tempor incididunt ut labore et dolore magna                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation                            ullamco laboris nisi ut aliquip ex ea commodo consequat.                        </p>                    </div>                </div>                                <div class="boxlink bg7" style="top:162px;left:0px;">                    <a href="">UAC</a>                    <div class="boxcontent">                        <p>Urban Art Creation a pour objectif :<br /><br />                            <ol>                                <li>Faire découvrir la danse sous toutes ses formes à un public le plus varié possible.</li>                                <li>Dynamiser la danse en Belgique.</li>                                <li>Assurer un suivi et un soutien aux participants de notre évènement et plus particulièrement au lauréat en leur proposant des stages pour les faire connaître.</li>                                <li>Encourager la pratique de la danse et transmettre ses valeurs fortes aux jeunes générations.</li>                                <li>Assurer la formation la plus moderne possible de nos jeunes danseurs semi ou professionnels.</li>                                <li>Favoriser l'échange : de la danse de rue au ballet, du tango au classique et mélanger les styles, les horizons et les milieux sociaux.</li>                                <li>Renforcer la cohésion et l'émancipation sociale.</li>                            </ol>                         </p>                    </div>                </div>                <div class="boxlink bg8" style="top:162px;left:146px;">                    <a href="">FASHION</a>                    <div class="boxcontent">                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                            sed do eiusmod tempor incididunt ut labore et dolore magna                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation                            ullamco laboris nisi ut aliquip ex ea commodo consequat.                        </p>                    </div>                </div>                <div class="boxlink bg9" style="top:162px;left:292px;z-index:999px;">                    <a href="">BIG UP!</a>                    <div class="boxcontent">                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                            sed do eiusmod tempor incididunt ut labore et dolore magna                            aliqua. Ut enim ad minim veniam, quis nostrud exercitation                            ullamco laboris nisi ut aliquip ex ea commodo consequat.                        </p>                    </div>                </div>            </div>    <a href="#" data-reveal-id="myModal" class="subscribe-btn"><span class="hide">Subscribe Now!</span></a><div id="myModal" class="reveal-modal">             <img src="images/logo-db-reducedsize.png" alt="logo dirty ballet" width="259" height="221" />             <img src="images/downloadhere-txt.png" alt="logo dirty ballet" width="211" height="135" />             <div id="download-section">                 <p><img src="images/choose-your-language.png" alt="Choose your language" width="253" height="89" /></p>                <a href="pdf/DirtyBallet-Dossier-FR-2011.pdf" title="Download Fran&ccedil;" class="subscribe-btn-left"><span class="hide">Fran&ccedil;ais</span></a>           <a href="pdf/DirtyBallet-Dossier-NL-2011.pdf" title="Download Nederlands" class="subscribe-btn-right"><span class="hide">Nederlands</span></a>             </div>                          <a class="close-reveal-modal">×</a>        </div>        <div id="myModal2" class="reveal-modal2">                     </div>        <div id="footer">            <a href="http://www.facebook.com/#!/profile.php?id=1576077307" class="fb" title="Facebook Dirty Ballet"><span class="hide">Join us on Facebook</span></a>            <a href="http://twitter.com/#!/dirtyballet" class="twitter" title="Twitter Dirty Ballet"><span class="hide">Follow us on Twitter</span></a>            <a href="mailto:dirtyballetawards@gmail.com?subject= Dirty Ballet Info :" class="mail" title="Email Dirty Ballet"><span class="hide">Send us an email</span></a>            <p id="copyright">&copy; Copyright Dirty Ballet 2005-2011 - Website designed and powered by <a href="http://www.web-4u.be" title="web-4u">Web-4U</a> and <a href="http://www.fealcreation.com" title="Fealcreation">Fealcreation</a></p>            <br style="clear:both;" />        </div>    </div></div><!-- fin Div Wrapper -->        <!-- The JavaScript -->        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>        <script type="text/javascript" src="jquery.easing.1.3.js"></script>       <script type="text/javascript">            $(function() {                /* object to save the initial positions of each box */                 var divinfo = {"initial": []};                /* index of the selected / clicked box */                var current = -1;                /* we save the index,top and left of each one of the boxes */                $('#littleBoxes > div').each(function(){                    var $this = $(this);                    var initial = {                                'index' : $this.index(),                                'top'     : $this.css('top'),                                'left'     : $this.css('left'),                                'z-index' : $this.css('z-index')                    };                    divinfo.initial.push(initial);                });                    // Vertical                /* clcik event for the anchors inside of the boxes */                $('#littleBoxes a').bind('click',function(e){                                                 var $this         = $(this);                        var $currentBox    = $this.parent();                        /* set a z-index lower than all the other boxes,                        to see the other boxes animation on the top*/                        $currentBox.css('z-index','1');/*                                                    $('.reveal-modal-bg2').css('z-index','0');                                                    $('.reveal-modal-bg2').css('background','rgba(0,0,0,.8)');*/                        $('#frame-bottom').css('z-index','0');                                                $('#frame-top').css('z-index','0');                        /* if we are clicking on a expanded box : */                        if(current == $currentBox.index()){                            /* put it back (decrease width,height, and set the top and left like it was before).                            the previous positions are saved in the divinfo obj*/                                                        $currentBox.stop().animate({                                    'top'         : divinfo.initial[$currentBox.index()].top,                                    'left'        : divinfo.initial[$currentBox.index()].left,                                    'width'     : '146px',                                                                        'height'    : '81px'                            },800,'easeOutBack').find('.boxcontent').fadeOut();/*                                                    $('.reveal-modal-bg2').css('z-index','0');                                                    $('.reveal-modal-bg2').css('background','rgba(0,0,0,0)');*/                            $('#littleBoxes > div').not($currentBox).each(function(){                                var $ele         = $(this);                                var elemTop     = divinfo.initial[$ele.index()].top;                                var elemLeft     = divinfo.initial[$ele.index()].left;/*                                var elemZindex     = divinfo.initial[$ele.index()].z-index;*/                                $ele.stop().show().animate({                                    'top'         : elemTop,                                    'left'        : elemLeft,/*                                    'z-index'     : elemZindex,*/                                    'opacity'    : 1                                },800);                            });                            $('#frame-bottom').css('z-index','1999');                            $('#frame-top').css('z-index','1999');                            current = -1;                        }                        /* if we are clicking on a small box : */                        else{                            /* randomly animate all the other boxes.                            Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450.                            This range is considering the initial lefts/tops of the elements. It's not the exact right                            range, since we would have to calculate the range based on each one of the boxes. Anyway, it                            fits our needs...                            */                            $('#littleBoxes > div').not($currentBox).each(function(){                                var $ele = $(this);                                $ele.stop().animate({                                    'top' : (Math.floor(Math.random()*601) - 150) +'px',                                    'left': (Math.floor(Math.random()*601) - 150) +'px',/*                                    'z-index' : 999,*/                                    'opacity':0                                },800,function(){                                    $(this).hide();                                });                            });                            /* expand the clicked one. Also, fadeIn the content (boxcontent)                            if you want it to fill the space of the littleBoxes container,                            then these are the right values */                            var newwidth     = 679;                            var newheight     = 479;                            var newZindex = 999;                            $currentBox.stop().animate({                                'top'     : '-100px',                                'left'    : '-120px',                                'z-index' : newZindex,                                'width' : newwidth +'px',                                'height': newheight+'px'                            },800,'easeOutBack',function(){                                current = $currentBox.index();                                $(this).find('.boxcontent').fadeIn();                                                                                    });                                                      }                        e.preventDefault();                });            });        </script></body></html>
Thanks in advance for your help!