Witam Serdecznie,

podzieliłem stronę na dwie części (2x width: 50%), w których znajdują się po jednej poziomej belce (wyśrodkowane względem wysokości), o określonej wysokości (height: 150px) + div z tekstem.

Planuję zrobić taką animację, że po najechaniu na którąś z belek, ta przyjmuje większą szerokość razem z połową strony (dodawana jest jakaś wartość do niej, a od przeciwnej odejmowana - iluzja przesunięcia) i zwiększa się wysokość belki (o jakąś określoną wartość), znika div z tekstem i pojawiają się inne divy (akurat 5 boxy/divy tematyczne).

Ogólnie wszystko działa, tylko problem pojawia się, gdy zaczniemy szybko jeździć po belce, ta zaczyna wariować. Nie mam pomysłu, jak to sensownie poukładać... Obecnie animuje animowaną belkę i wariuje... Poniżej kod:

[HTML] pobierz, plaintext 
    $(function(){
       $(".nav-right").hover(function(){
          $(".title-right").hide();
          $(".right").animate({width: '+=200px' }, {queue:true,duration:500});
          $(".left").animate({width: '-=200px'}, {queue:true,duration:500});
             $(".nav-right").animate({height: '+=140px', top: '42%'}, {queue:true,duration:500});
             $(".item-right").css({visibility: "visible",display: "none"}).fadeIn(500);
             return false;
       },function(){
          $(".title-right").css({visibility: "visible",display: "none"}).fadeIn(1200);
          $(".right").animate({width: '-=200px'}, {queue:true,duration:500});
          $(".left").animate({width: '+=200px'}, {queue:true,duration:500});
             $(".nav-right").animate({height: '-=140px', top: '50%'}, {queue:true,duration:500});
             $(".item-right").hide();
       });
    });
    $(function(){
       $(".nav-left").hover(function(){
          $(".title-left").hide();
          $(".left").animate({width: '+=200px'}, {queue:true,duration:500});
          $(".right").animate({width: '-=200px'}, {queue:true,duration:500});
             $(".nav-left").animate({height: '+=140px', top: '42%'}, {queue:true,duration:500});
             $(".item-left").css({visibility: "visible",display: "none"}).fadeIn(500);
             return false;
       },function(){
          $(".title-left").css({visibility: "visible",display: "none"}).fadeIn(1200);
          $(".left").animate({width: '-=200px'}, {queue:true,duration:500});
          $(".right").animate({width: '+=200px'}, {queue:true,duration:500});
             $(".nav-left").animate({height: '-=140px', top: '50%'}, {queue:true,duration:500});
             $(".item-left").hide();
       });
    });
[HTML] pobierz, plaintext 

Legenda
.left/.right to lewa i prawa strona (width:50%)
.nav-left/right to belka
.item-left/right to zawartość, która ma się pojawić po najechaniu
.title-left/right to div z tekstem

Próbowałem to też zrobić na zasadzie complete w animacji, ale efekt ten sam, czyli animacja wariuje.

Prosiłbym o wskazówki w edycji kody. Chciałbym, aby animacja cała się wykonywała, czyli ktoś najeżdża - animuje do pokazania boxów, ktoś zjeżdża kursorem - animuje powrót do normalnego wyglądu. Żeby nie było możliwości animacji podczas animacji.

Dziękuję!

Prze wykonaniem animacji powinieneś zatrzymać starą http://api.jquery.com/stop/