Hi all,

I have a script, but it's slowing down when using it. Inside the display(elem) function I'm binding event handlers using click(). These event handlers get installed multiple times, which will ultimately cause delays and animation bugs. To solve this I want to use live() to install event handlers at the very beginning, preventing the slow down.

The problem is, where do I put this .live() in the script. Tried some options myself, but this resulted in a non working script OR no change at all and the script kept delaying. I would appreciate if someone can show me where to put this .live() or have another (better?) solution to prevent the delays.

Any help is appreciated!

The script:

1. <script type="text/javascript">
   $(function() {
   /* the index of the current list element */
   var current = 1;
   
   /* function to iterate through all the list elements */
   var iterate = function(){
   var i = parseInt(current+1);
   var lis = $('#rotmenu').children('li').size();
   if(i>lis) i = 1;
   display($('#rotmenu li:nth-child('+i+')'));
   }
   
   /* Initially display the first one */
   display($('#rotmenu li:first'));
   
   /* if the User clicks on one list item, the auto slider stops */
   $('#rotmenu li').bind('click',function(e){
   display($(this));
   e.preventDefault();
   });
   
   /* displays each element associated to the "elem" list element */
   function display(elem){
   var $this = elem;
   var repeat = false;
   if(current == parseInt($this.index() + 1))
   repeat = true;
   
   /* slide in the current one (li-menu) */
   if(!repeat)
   $this.parent()
   .find('li:nth-child('+current+') a')
   .stop(true,true)
   .animate({'marginRight':'-20px'},300,function(){
   $(this).animate({'opacity':'0.7'},700);
   });
   
   current = parseInt($this.index() + 1);
   
   var elem = $('a',$this);
   
   /* slide out the clicked or next one */
   elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
   
   /* the heading and description will slide out, change the content and slide back in */
   var info_elem = elem.next();
   $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
   $('h1',$(this)).html(info_elem.find('.info_heading').html());
   $(this).animate({'left':'0px'},400,'easeInOutQuad');
   });
   
   $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
   $('p',$(this)).html(info_elem.find('.info_description').html());
   $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
   });
   
   /* open by click */
   $('#clickme').click(function() {
   $('#rot1 .close').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
   });
   
   $('#rot1 .menu').animate({'left':'600px'}, 500,'easeOutCirc',function(){
   $('h1',$(this)).html(info_elem.find('.info_heading').html());
   $(this).animate({'right':'0px'},400,'easeInOutQuad');
   });
   $('#rot1 .title').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
   $('h1',$(this)).html(info_elem.find('.info_heading').html());
   $(this).animate({'left':'0px'},400,'easeInOutQuad');
   });
   $('#rot1 .content').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
   $('p',$(this)).html(info_elem.find('.info_description').html());
   $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
   });
   
   });
   /* close by click */
   $('#2').click(function() {
   $('#rot1 .close').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
   $('p',$(this)).html(info_elem.find('.info_close').html());
   $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
   });
   $('#rot1 .title').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
   });
   $('#rot1 .menu').animate({'left':'850px'}, 500,'easeOutCirc',function(){
   });
   $('#rot1 .content').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
   });
   
   });
   }
   });
   </script>