Wat is de echte manier om callback-functionaliteit toe te voegen aan aangepaste JQuery-animatie?

ik heb een shake-effect gevonden in de stackoverflow-vraag ( hier )
Code is zoals hieronder;

jQuery.fn.shake = function(intShakes, intDistance, intDuration) {
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
return this;
};

maar ik heb een manier nodig om een ​​callback-functie (of een andere eenvoudige manier) toe te voegen voor chaging-randkleur van schudelement vóór het effect en om te schakelen naar originele kleur nadat animatie is voltooid.
Ik heb geprobeerd zoals hieronder, maar geen kans (grens draait originele kleur onmiddellijk)

jQuery.fn.shake = function(intShakes, intDistance, intDuration,callback) {
    this.each(function() {
        $(this).css("position","relative"); 
        for (var x=1; x<=intShakes; x++) {
        $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4)))
    .animate({left:intDistance}, ((intDuration/intShakes)/2))
    .animate({left:0}, (((intDuration/intShakes)/4)));
    }
  });
if(callback) callback();
return this;
};

en bel zo

$elem.css('borderColor','red');
$elem.shake(3,5,500,function(){
$elem.css('borderColor','#a6caf0');})

U kunt een JSFiddle-voorbeeld vinden hier . (Als u de callback-functie in fiddle annuleert, ziet u dat randen worden rood correct maar callback mislukt.)
Thaks nu meteen ...

0
Bekijk de knop 'Opruimen' in jsFiddle ...
toegevoegd de auteur Šime Vidas, de bron
@JaredFarrish In jsFiddle in de bovenste werkbalk ... staat een van de knoppen.
toegevoegd de auteur Šime Vidas, de bron
@Alper Hou je me voor de gek? De inspringing in uw demo is verbroken ...
toegevoegd de auteur Šime Vidas, de bron
@Alper Heb je de oplossing voorgesteld door het geaccepteerde antwoord in die andere vraag (dat jquery.effects.shake.js -script) geprobeerd?
toegevoegd de auteur Šime Vidas, de bron
@ ŠimeVidas - Waar? Ik heb er nog nooit van gehoord.
toegevoegd de auteur Jared Farrish, de bron
@ ŠimeVidas - Heilige koe, dat is geweldig. Ik was eigenlijk (hij hij) op zoek naar Firebug. Ik dacht: waar ??
toegevoegd de auteur Jared Farrish, de bron
@Alpert - Niet echt: jsfiddle.net/f96ff/1
toegevoegd de auteur Jared Farrish, de bron
@ Šime Vidas - Ik deed het maar de code ziet er al netjes uit ...
toegevoegd de auteur Alper, de bron
Ok ik heb een probleem met Js Fiddle (ik bedoel, ik maak geen grapje), ik zie nog steeds het mooi ingesprongen codeblok, zelfs nadat ik verschillende keren op Tidy Up heb gedrukt, heb ik het bijgewerkt. Hoe het nu is?
toegevoegd de auteur Alper, de bron
@ Šime Vidas - Ik heb het niet geprobeerd omdat ik geen nieuw bestand wil opnemen in mijn project en dit codefragment werkt goed. En ik denk dat dit een van de manieren is om te leren;)
toegevoegd de auteur Alper, de bron

2 antwoord

Alsjeblieft:

$.fn.shake = function ( times, distance, duration, callback ) {
    return this.css({ position: 'relative' }).each( function() {            
        for ( var i = 0, t = duration/times; i < times; i+= 1 ) {
            $( this ).
                animate({ left: -distance }, t/3 ).
                animate({ left:  distance }, t/3 ).
                animate({ left:         0 }, t/4 );
        }

        $( this ).show( callback );
    });
};

En dan...

$( button ).click( function() {
    $( field ).addClass( 'shaking' ).shake( 5, 10, 500, function() {
        $( this ).removeClass( 'shaking' );
    });
});

Live demo: http://jsfiddle.net/f96ff/8/

Een timer is niet nodig. U voegt gewoon de functie callback toe aan de effectenwachtrij via de methode (neutraal) .show() . Dit zorgt ervoor dat de callback alleen na wordt opgeroepen alle animaties (uit de wachtrij) zijn voltooid.

Daarnaast raad ik een CSS-klasse aan voor de status 'schudden':

.shaking { border-color: red; }

Merk ook op dat ik de code voor $. Fn.shake aanzienlijk heb aangepast. Ik raad u aan om een ​​paar minuten de tijd te nemen om te analyseren hoe ik de code heb verbeterd.

3
toegevoegd
@alper - De reden dat ik uw geaccepteerde antwoord niet heb opgewaardeerd was omdat ik instinctief de methode time-out niet accepteerde. Ik hoop dat je dit antwoord ziet.
toegevoegd de auteur Jared Farrish, de bron
Wauw, het ziet er mooi uit, zoals ik al eerder zei, ik probeer het in meer diepgang te leren. Bedankt voor je pure (perfecte) JQuery-oplossing.
toegevoegd de auteur Alper, de bron

U moet een time-out instellen, u kunt de callback niet rechtstreeks aanroepen omdat de animatiefunctie van jQuery async is. Dus het voert de callback rechtstreeks uit. Wat kan worden gedaan, is een time-out instellen voor de tijd van de totale animatie.

Je kunt ook niet alleen de callback van de animatiefunctie van jQuery gebruiken omdat je multiple gebruikt.

Solution: http://jsfiddle.net/f96ff/2/

1
toegevoegd
bedankt .. werkt perfect ..
toegevoegd de auteur Alper, de bron
Šime Vidas financiert een betere manier om het met pure jQuery te doen, maar nogmaals bedankt voor je snelle en werkende antwoord.
toegevoegd de auteur Alper, de bron