Stop() voor CSS3 transities?

[Nedra]

Ik heb een simpel afbeeldingen 'slide' dingetje gemaakt waar een afbeelding een beetje sliding doors stijl onthuld word op hover, en de naaste afbeeldingen verkleint worden. Als ik dit doe met jQuery animate werkt het als een zonnetje, maar liever nog zou ik dit doen met CSS3 transities. In principe werkt dit ook goed; in js zet ik de breedte van de items op hover en en in de css handel ik dan de transities af, alleen werkt het niet helemaal lekkeri n FireFox en IE10. Daar komt namelijk een kleine ruimte tussen het laatste en op een na laatste item (of het laatste item als ik ze allemaal 'left' float) wanneer je snel over meerdere items hovert.

Is er zoiets als een stop() functie die ik kan gebruiken om te voorkomen dat het totaal ooit kleiner is dan 100% breedte?

En dit de simpele jquery code

code:

$('.imgWrap').hover(function () {
  $(this).css('width', '36%');
  $(this).siblings().css('width', '16%');   
}, function () {
   $('.imgWrap').css('width', '20%');   
 });

Overigens is dit de versie die zonder problemen werkt:

code:

     $('.imgWrap').hover(function () {
        $(this).stop(true, false).animate({
            width: '40%'
        }, 600, 'swing');
        $(this).siblings().stop(true, false).animate({
            width: '15%'
        }, 600, 'swing');
    }, function () {
        $('.imgWrap').stop(true, false).animate({
            width: '20%'
        }, 600, 'swing');
    });

[Rekcor]

http://stackoverflow.com/...nimation-using-javascript

ik denk dat je het met CSS alleen niet redt...

[Nedra]

Rekcor schreef op maandag 15 april 2013 @ 08:19:
http://stackoverflow.com/...nimation-using-javascript

ik denk dat je het met CSS alleen niet redt...

Ik wist niet eens dat er een 'play-state' bestond voor CSS animaties . Ik ga er straks eventjes mee aan de slag en zal m'n uiteindelijke oplossing nog wel even delen. Thx