Question

I am trying to use 2 jQuery objects on the same page, however, I cannot seem to get them both working simultaneously, If I play around with the code I can get one or the other working but not at the same time. I am quite new to this stuff so really appreciate your help on this.

The code in the head section is as follows

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js">
</script>


    <script src="jquery.easing.1.3.js" type="text/javascript"></script>  
  <script type="text/javascript">
        $(document).ready(function() { 

            $curtainopen = false;

            $(".rope").click(function(){
                $(this).blur();
                if ($curtainopen == false){ 
                    $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'60px'},2000 );
                    $curtainopen = true;
                }else{
                    $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                    $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                    $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                    $curtainopen = false;
                }
                return false;
            });

        }); 
    </script>

Answer 1

i think the problem is that there is conflict

jQuery defines a nice solution to resolve conflicts: jQuery.noConflict. By using this function you can define your own name, where jQuery will be accessible.

var $jq = jQuery.noConflict(true);