Question

I’m currently building a simple “jQuery Image Slider” but it does not work as i hoped. It’s incredible slow and unresponsive, and the last image does not do anything.

URL: http://fusionmedia.dk/jquery/

What is the problem?

Thanks in advance

Answer 1

Specify a faster speed. Its defaulting to a slower speed.

$('#gallery').delegate('img', 'mouseover', function() {

                $this = $(this);

                for(var i = 0; i <= $this.siblings().size(); i++) {

                    if($this.index() > i) {

                        $this.siblings().eq(i).stop().animate({ left: (i * 50) + 'px' }, 300);

                    } else {

                        $this.siblings().eq(i).stop().animate({ left: ((i * 50) + 500) + 'px' }, 300);

                    }

                }

            });

EDIT:

You have 2 really bad problems for speed.

1: You are running a time costly loop every time they hover.

2: You are calling $this.siblings() too many times. Cache that.

Here is an example of how to better implement some of this, I still have you loop inside the hover event, you should try and get that moved out.

$(function(){

         $('#gallery').find('img').each(function(){

            $this = $(this);
            $this.css('left', $this.index() * 50 + 'px');

         });

         $('#gallery').delegate('img', 'mouseover', function(){

            $this = $(this);
            var $sibs = $this.siblings();
            for (var i = 0; i <= $sibs.size(); i++) {

               if ($this.index() > i) {

                  $sibs.eq(i).stop().animate({
                     left: (i * 50) + 'px'
                  });

               } else {

                  $sibs.eq(i).stop().animate({
                     left: ((i * 50) + 500) + 'px'
                  });
               }
            }
         });
      });