Fx alternativ in jquery

lsaquolsaquo hem jQuery Cycle Plugin Kolla in Cycle2. det senaste i cykellinjen i bildspel. JQuery Cycle Plugin är ett plugin för bildspel som stöder många olika typer av övergångseffekter. Den stöder paus-på-hover, auto-stop, auto-fit, innanpå callbacks, klicka triggers och mycket mer. Den stöder också, men behöver inte, Easing Plugin. Hur det fungerar Pluggen ger en metod som kallas cykel som åberopas på ett behållarelement. Varje barnelement i behållaren blir en bild. Alternativ styr hur och när bilderna övergår. scrollRight (klicka) Bilder används i dessa demos eftersom de ser coola ut, men bildspel är inte begränsade till bilder. Du kan använda vilket element du vill ha. Bläddra i effekter Använd sidan Effects Browser för att förhandsgranska tillgängliga effekter. Se fler demos och exempel Cycle Plugin erbjuder många alternativ för att anpassa ditt bildspel. Standardalternativsvärdena kan överskridas genom att överföra ett alternativobjekt till cykelmetoden, genom att använda metadata på behållarelementet eller genom att omdefiniera värdena i din egen kod. Mer information om alternativ finns på sidan Alternativreferens. Erkännande Särskilt tack till Torsten Baldes. Matt Oakes och Ben Sterling för de många idéerna som fick mig att börja skriva Cycle 2007. Animate () En sträng som indikerar vilken lättnad som ska användas för övergången. En booleska som indikerar huruvida animationen ska placeras i effektkön. Om det är felaktigt börjar animationen omedelbart. Från jQuery 1.7. Kön alternativet kan också acceptera en sträng, i vilket fall animationen läggs till i kön representerad av den strängen. När ett anpassat könamn används startar inte animeringen automatiskt du måste ringa. dequeue (quotqueuenamequot) för att starta den. Ett objekt som innehåller en eller flera av CSS-egenskaperna definierade av egenskapsargumentet och deras motsvarande lättnadsfunktioner. (version läggas till: 1.4) En funktion som ska kallas för varje animerad egenskap hos varje animerat element. Denna funktion ger möjlighet att ändra Tween-objektet för att ändra egenskapens värde innan det är inställt. En funktion som ska kallas efter varje steg i animationen, bara en gång per animerat element oavsett antal animerade egenskaper. (version läggas till: 1,8) En funktion som kallas en gång animationen på ett element är klar. En funktion som ska ringas när animationen på ett element börjar. (version tillagd: 1.8) En funktion som ska ringas när animationen på ett element slutförts (dess Promise-objekt är löst). (version tillagd: 1.8) En funktion som ska ringas när animationen på ett element misslyckas att slutföra (dess Promise-objekt avvisas). (version läggas till: 1.8) En funktion som ska ringas när animationen på ett element kompletterar eller slutar utan att slutföra (dess Promise-objekt är antingen löst eller avvisat). (version läggas till: 1,8) Metoden. animate () tillåter oss att skapa animeringseffekter på någon numerisk CSS-egenskap. Den enda nödvändiga parametern är ett vanligt föremål för CSS-egenskaper. Det här objektet liknar det som kan skickas till metoden. css (), med undantag för att egenskaperna är mer restriktiva. Animationsegenskaper och värden Alla animerade egenskaper ska animeras till ett enda numeriskt värde. med undantag för vad som anges nedan kan de flesta egenskaper som är icke-numeriska inte animeras med grundläggande jQuery-funktionalitet (Till exempel bredd, höjd eller vänster kan animeras men bakgrundsfärg kan inte vara, om inte jQuery. Color-plugin används). Fastighetsvärden behandlas som ett antal pixlar om inget annat anges. Enheterna em och kan anges när det är tillämpligt. Förutom stilegenskaper, vissa egenskaper som inte är typiska som scrollTop och scrollLeft. såväl som anpassade egenskaper, kan animeras. Korthand CSS-egenskaper (t ex typsnitt, bakgrund, gräns) stöds inte fullt ut. Om du till exempel vill animera den gjorda gränsen bredden måste åtminstone en gränsstil och annan kantbredd än kvotkvot ställas in i förväg. Eller om du vill animera typstorleken, skulle du använda fontSize eller CSS-motsvarande aposfont-sizeapos snarare än bara aposfontapos. Förutom numeriska värden kan varje egenskap ta strängarna aposshowapos. aposhideapos. och apostoggleapos. Dessa genvägar tillåter anpassade döljer och visar animeringar som tar hänsyn till elementets displaytyp. För att kunna använda jQueryaposs inbyggd växelstatsspårning måste apostoggleapos sökord konsekvent anges som värdet av egenskapen som animeras. Animerade egenskaper kan också vara relativa. Om ett värde levereras med en ledande eller - följd av tecken beräknas målvärdet genom att lägga till eller subtrahera det angivna numret från egenskapens nuvarande värde. Obs! Till skillnad från shorthand animationsmetoder som. slideDown () och. fadeIn (). Metoden. animate () gör inte dolda element synliga som en del av effekten. Till exempel ges (quotsomeElementquot).hide (). Animera (, 500). animationen kommer att springa, men elementet kommer att förbli gömt. Varaktighet anges i millisekunder. Högre värden anger långsammare animationer, inte snabbare. Standardlängden är 400 millisekunder. Strängarna kan användas för att ange varaktighet på 200 respektive 600 millisekunder. Återuppringningsfunktioner Om den levereras, startar. steg. framsteg. komplett. Gjort. misslyckas. och alltid callbacks kallas på per element basis detta är inställt på att DOM-elementet är animerat. Om inga element finns i uppsättningen kallas inga återuppringningar. Om flera element animeras, exekveras återuppringningen en gång per matchat element, inte en gång för animeringen som helhet. Använd metoden. promise () för att få ett löfte som du kan bifoga callbacks som eldar en gång för en animerad uppsättning av alla storlekar, inklusive nollelement. Grundläggande användning För att animera något element, till exempel en enkel bild: Figur 1 - Illustration av den angivna animeringseffekten Observera att målvärdet för höjdsegenskapen är apostoggleapos. Eftersom bilden var synlig före, krymper animationen höjden till 0 för att dölja den. Ett andra klick reverserar sedan denna övergång: Figur 2 - Illustration av den angivna animeringseffekten Opacitet av bilden ligger redan vid sitt målvärde, så den här egenskapen är inte animerad av det andra klicket. Eftersom målvärdet för vänster är ett relativvärde flyttas bilden ännu längre till höger under den andra animationen. Riktningsegenskaper (övre, högra, nedre, vänstra) har ingen märkbar effekt på element om deras positionstilegenskaper är statiska. som det är som standard. Obs! Projektet jQuery UI utökar metoden. animate () genom att låta vissa icke-numeriska stilar, såsom färger, animeras. Projektet innehåller också mekanismer för att ange animationer via CSS-klasser i stället för enskilda attribut. Obs! Om du försöker animera ett element med en höjd eller bredd på 0px, där innehållet i elementet är synligt på grund av överflöde, kan jQuery klippa överflödet under animering. Genom att fastställa dimensionerna hos det ursprungliga elementet är det dock möjligt att säkerställa att animeringen löper smidigt. En clearfix kan användas för att automatiskt fastställa måtten på ditt huvudelement utan att behöva ställa in det här manuellt. Steg Funktion Den andra versionen av. animate () ger ett steg alternativ x2014 en återuppringningsfunktion som avfyras vid varje steg i animationen. Den här funktionen är användbar för att aktivera anpassade animationstyper eller ändra animeringen som den uppstår. Den accepterar två argument (nu och fx), och detta är inställt på att DOM-elementet är animerat. nu. Det numeriska värdet för egenskapen animeras vid varje steg fx. en referens till jQuery. fx prototypobjektet, som innehåller ett antal egenskaper som elem för det animerade elementet, starta och avsluta för respektive respektive animerade egenskaps första och sista värde och ange att egenskapen är animerad. Observera att stegfunktionen kallas för varje animerad egenskap på varje animerat element. Till exempel, med tanke på två listobjekt, firar stegfunktionen fyra gånger vid varje animationssteg: Bildspelet Auto-Initialization Cycle2 kan initieras automatiskt genom att lägga till klassnamnens cykel-bildspel till ditt bildspelets behållarelement. Cycle2 hittar automatiskt och initierar ett bildspel för varje element som innehåller detta klassnamn. Om du inte vill ha detta beteende lägger du inte till cykel-bildspelsklassen i ditt bildspel och istället initierar bildspelet programmatiskt genom att aktivera cykelmetoden på bildspelets behållarelement: Autoinitiering stöds inte för bildspel som läggs till i DOM efter att jQuerys redo händelse har avfyras. I det här fallet måste du programmässigt initiera ditt bildspel genom att anropa cykelmetoden som visas ovan. Du behöver inte kvalificera din väljare till den del av DOM som har uppdaterats, eftersom Cycle2 inte kommer att initiera ett pågående bildspel om du anropar cykel på det mer än en gång. Så det är helt säkert att köra koden ovan flera gånger utan att behöva oroa sig för bildspel som redan körs. Alternativen ställs in på bildspelet med hjälp av data-cykel-alternativ-namn attribut. Alternativnamnet är alltid små bokstäver och prefixat med datacykel-. Till exempel, för att ställa in alternativen för hastighet och manuell hastighet skulle du göra det här: Det här är den föredragna metoden för att ställa in bildspel, eftersom det i hög grad minskar (eller eliminerar) behovet av anpassat initieringsskript. Alternativ kan också ställas in programmatiskt om du föredrar, genom att skicka en optionshash till cykelmetoden. Vid inställning av alternativ programmiskt innehåller alternativnamnet inte datacykelprefixet och strängen är camelCased på bindestreck: Alla alternativ kan deklareras med datacykel-attribut på behållarelementet och kommer att ärva av alla diabilder. Alternativ i tabellen nedan som har en tjur symbol kan överskridas på enskilda objektglas för att få specifika egenskaper för specifika bilder. Det här alternativet avgör huruvida ett bildspel kan gå från sista bilden till det första (eller vice versa). Om den är inställd på falsk när en bildspel nått sin sista bild kan den inte längre avanceras framåt, den går bara framåt bakåt. På samma sätt när ett bildspel visar den första bilden kan den inte gå bakåt. Som standard kommer ett bildspel att gå smidigt från den sista bilden till den första. heltal eller förhållande Det här alternativet avgör om Cycle2 ska tillhandahålla höjdhantering för bildspelet, vilket kan vara mycket användbart i flytande eller lyhörd formgivning. Det finns tre sätt att använda det här alternativet: ett heltal kan tillhandahållas för att identifiera det nollbaserade bildindexet för en sentinellglidning, strängen calc kan tillhandahållas för att instruera cykel2 för att beräkna den högsta bilden och använda den som signaturen en förhållandestring kan tillhandahållas som identifierar bredden: höjdaspektförhållande för behållaren Som standard används bildspelets första diabild som skärmdysan och dess dämpningar kommer att styra höjden på diasshowbehållaren om behållaren inte har en specifik höjd inställd via CSS . För att tvinga bildspelets behållare till ett visst bildförhållande, till exempel för att hålla en uppsättning bilder som är 600x400, använd en förhållandesträng så här: För att inaktivera höjdhantering, sätt detta alternativvärde till -1 eller false. autoSelector (endast programmatisk användning) En jQuery-väljare som identifierar element som bör initieras automatiskt av Cycle2. Standardvärdet är. cykel-bildspel. Lägg till cykel-bildspelsklassen till din bildspelshållare och Cycle2 hittar automatiskt och initierar den när DOM-redo-händelsen brinner. Detta värde kan bara ändras programmatiskt och det kan inte ändras när DOM-redo-händelsen har avfyras. För att ändra ska du inkludera ett sådant skript efter att Cycle2 har laddats och innan det färdiga händelsen brinner: En väljare som identifierar det element som ska användas för bildspelet i bildspelet. Som standard söker Cycle2 efter ett element med klassen. cykeltext som finns i bildspelshållaren. En mallsträng som definierar hur bildspelet ska formateras. Mallen kan referera till realtidsstatusinformation från bildspelet, till exempel det aktuella bildbildet, etc. Cycle2 använder som standard enkla moustansstilar. continueAuto (endast programmatisk användning) Alternativ som kan ställas in dynamiskt för att instruera C2 att sluta övergå till en timeout. Det här är användbart när du vill börja med ett automatiskt bildspel, men senare byta till ett manuellt bildspel. Detta alternativ kan också vara en funktion som returnerar ett booleskt värde. Antalet millisekunder att lägga till eller subtrahera från tiden innan den första bildövergången inträffar. Klassnamnet för att tilldela prevnext-länkar när de inte kan aktiveras (på grund av datacykel-tillåten-wrapfalse. Värdet på det här alternativet bör inte innehålla en föregående punkt. Namn på lättnadsfunktionen som ska användas för animeringar. Bildspelets namn Övergång till användning. Följande övergångsnamn är tillgängliga som standard och flera kan läggas till med plugins: fade. fadeout. none. och scrollHorz. Bestämmer huruvida Cycle2 döljer de inaktiva objektglasen. för bildspelet. Exempel. Felaktigt inaktiverat laddningsfunktion Sann laddningsdia som bilderna kommer vänta Vänta tills alla bilder kommer fram innan du tittar på bildspelet Ställ in som falskt för att inaktivera konsolloggning. Antalet gånger ett automatiskt framåtriktat bildspel ska slingas innan det avslutas. värdet är mindre än 1 så släpper slideshowet kontinuerligt. Ställ in till 1 till en slinga en gång, etc. Om alternativet för tilläggsplugg läggs till felaktigt kommer det att överskrida loopning. Övergångseffekten som ska användas för manuell Ly utlöst övergångar (inte timerbaserade övergångar). Hastigheten (i millisekunder) för övergångar som startas manuellt, t. ex. de som orsakas av att klicka på en nästa knapp eller en personsökarkrets. Som standard uppträder manuella övergångar med samma hastighet som automatiska (timerbaserade) övergångar. Bestämmer huruvida övergångar är avbrutna för att starta nya om de nya är resultatet av en användaraktivitet (inte timer) En väljarsnor som identifierar elementet (eller elementen) som ska användas som utlösare för att främja bildspelet framåt. Som standard söker Cycle2 efter ett element med klassen. cykel-nästa som finns i bildspelshållaren. Händelsen binder till element som identifieras med nästa alternativ. Som standard binder Cycle2 klickhändelser. En väljarsnor som identifierar det element som ska användas som överlagringselementet. Ett bildspel överlägg ger vanligtvis information om den aktuella bilden. Som standard söker Cycle2 efter ett element med klassen. cykelöverlägg som finns i bildspelshållaren. En mallsträng som definierar hur överlägget ska formateras. Mallen kan referera till realtidsstatusinformation från bildspelet, till exempel det aktuella bildbildet, etc. Cycle2 använder som standard enkla moustansstilar. En väljarsnor som identifierar det element som ska användas som behållare för personsökarlänkar. Som standard söker Cycle2 efter ett element med klassen. cycle-personsökare som finns i bildspelshållaren. sträng (css klassnamn) Klassnamnet som ska tilldelas pager länkar när en viss länk refererar till den nuvarande synliga bilden. Värdet på det här alternativet bör inte innehålla en föregående punkt. sträng (händelse namn) Den typ av händelse som är bunden på personsökarens länkar. Som standard binder Cycle2 klickhändelser. Ange till true så att pager händelser kan bubbla upp DOM. Detta är användbart om du har ett ankare inuti ditt personsökningselement och vill att ankaren ska följas när den klickas. En mallsträng som definierar hur pagerlänkarna ska formateras. Mallen kan referera i realtidsinformation från bildspelet eftersom varje bild läggs till. Standardpagerlänken är helt enkelt en kula. Cycle2 använder som standard enkla mustasch-mallar. booleska eller sträng Om det är sant kommer ett automatiskt bildspel att vara pausat medan musen är över bildspelet. Du kan också ange en jQuery-väljarsekvens för värdet för att ange elementet / elementen som hoverhändelserna ska vara bundna till. Om sant slideshowet börjar i pausat tillstånd. En väljarsnor som identifierar elementet (eller elementen) som ska användas som utlösare för att främja bildspelet bakåt. Som standard söker Cycle2 efter ett element med klassen. cycle-prev som finns i bildspelshållaren. sträng (händelse namn) Den typ av händelse som är bunden till föregående och nästa länkar. Som standard binder Cycle2 klickhändelser. Identifierar ett element i DOM som innehåller en JSON-grupp som representerar bilderna som ska laddas gradvis i bildspelet. Exempel. Om sant kommer ordningen av bilderna slumpmässigt. Det här påverkar bara bilder som är inledningsvis i markeringen, inga diabilder läggs till via tilläggskommandot eller via Cycle2s bildlastarfunktionalitet. Om sant bildspelet fortsätter i omvänd ordning och övergångar som stöder detta alternativ körs en omvänd animering. Klassnamnet som ska tilldelas den aktiva bilden. Värdet på det här alternativet bör inte innehålla en föregående punkt. Ett objekt som definierar css egenskaper som ska appliceras på varje bildruta när den initialiseras (en gång). Namn på klassen som ska läggas till i varje bild. En väljarsnor som identifierar elementen i bildspelshållaren som ska bli diabilder. Som standard hittar Cycle2 alla bildelement som är omedelbara barn i bildspelshållaren. Övergångseffektens hastighet i millisekunder. Det nollbaserade indexet för objektglaset som bör visas först. Ställ in sant för att aktivera swipe gesture support för att främja bildspelet framåt eller bakåt. Övergångseffekten som ska användas för swipe-triggered övergångar. Om inte tillhandahålls kommer övergången deklarerad i attributet data-manual-fx eller data-fx att användas. Om det är korrekt kommer animering av inkommande och utgående bilder att synkroniseras. Om det är felaktigt startar inte animeringen för inkommande bild tills animationen för den utgående bilden är klar. Tiden mellan bildövergångar i millisekunder. Det vanliga regeluttrycket som används för malltokenisering. Bestämmer när updateView-metoden åberopas (och händelsen utlöses). Om värdet är -1, uppdateras uppdatering endast omedelbart efter övergången. Om värdet är 0 anropas uppdateringsvy under bildövergången. Om värdet är 1, uppdateras uppdateringsversionen omedelbart vid början av en bildövergång och igen omedelbart efter övergången. Kommandon utfärdas till bildspel genom att åberopa cykel på behållarelementet och överföra det ett strängargument, vilket är kommandonamnet. Det är inte giltigt att utfärda ett kommando till ett element som inte tidigare har initierats som ett Cycle2-bildspel. Lägger till en eller flera bilder till bildspelet. Slide markup eller jQuery-objekt Återställer bildspel DOM till dess ursprungliga tillstånd (och förbinder händelser). Överför bildspelet till det angivna bildbildet. nollbaserat bildindex Stoppar ett bildspel som körs automatiskt. Deklarativa kommandon Det är möjligt att utfärda kommandon declarative genom att använda attributet datacykel-cmd. Du kan använda det här attributet på något element och Cycle2 kommer att använda händelsedelegation för att utfärda en cykelkommando när elementet klickas. Om du till exempel vill ha ett slumpmässigt knappelement pausar ditt bildspel kan du göra det här: När knappen ovan klickas, genererar Cycle2 automatiskt och kör den här koden för dig: Om du vill ange ett visst bildspel som målet för kommandot, använd data-cykel-kontext attribut och ange dess värde till en väljarsträng som identifierar önskat bildspel: När den ovanstående knappen klickas, kommer Cycle2 automatiskt att generera och köra den här koden för dig: Och äntligen kan du skicka ett argument till cykeln kommando med att använda data-cykel-arg attributet. Till exempel, för att ta bort den första bilden i ett bildspel: Cycle2 avger många händelser när ett bildspel körs och du kan binda till dessa händelser för att ytterligare anpassa eller förbättra bildspelets beteende. Alla cykelhändelser utlöses på bildspelet och kan därför bindas med kod som: Beskrivning Återuppringning Signatur Utlösning efter att bildspelet har slutfört övergången till nästa bild. Triggered strax före övergången till en ny bild. Detta är den första händelsen som utlöses av ett bildspel och det ger möjlighet att åsidosätta alternativen för bildspel och API. API arg är ett objekt hash av dessa bildspel instanser API-metoder. Triggered efter bildspelet har förstörts av förstörelse kommandot. Triggered efter att bildspelet har avslutats på grund av loop-alternativet. Triggered efter ett bildspel har blivit fullt initaliserat. Triggered efter att bildspelet har börjat avancera på grund av nästa kommando. Triggered efter bildspelet har startat övergång på grund av en personsöknings länkhändelse. Triggered efter bildspelet har pausats till följd av antingen pauskommandot eller paus-på-hover-alternativet. Triggered omedelbart efter att ha kört hela initieringslogiken på bildspelet. Triggered innan du kör den fullständiga initialiseringslogiken på bildspelet (men efter att den ursprungliga bildsättet har lagts till). Triggered efter bildspelet har börjat avancera på grund av prev-kommandot. Triggered efter bildspelet har pausats till följd av antingen CV-kommandot eller paus-på-hover-alternativet. Triggered efter att en bild har blivit tillagd i bildspelet Triggered efter att en bild har tagits bort från bildspelet på grund av borttagningskommandot. Triggered efter bildspelet har stoppats av stoppkommandot. Triggered efter animering av en eller flera bilder har avbrutits på grund av manuell bildframställning eller på grund av att antingen stoppet eller förstörelsen kommit ut. Triggered efter initialisering, efter en glidövergång, och efter att en bild har lagts till eller tagits bort. Diverse bitar Cykel2-alternativets hash innehåller alla bildspel som beskrivs ovan, tillsammans med följande ytterligare delar av körtidstillstånd. Statliga data är skrivskyddade.