Programim dhe zhvillim, javascript, python, php, html

Si të ekzekutoni në mënyrë sekuenciale një animacion * vetëm një herë * pas animacionit në një grup (p.sh. vëllezërit e motrat)

Këtu është dilema ime. Unë kam 2 animacione që duhet të ekzekutohen në mënyrë sekuenciale.

Animacioni i parë funksionon në një grup elementësh të fituar përmes funksionit siblings() të jQuery.

Animacioni i dytë funksionon në një element të vetëm. (Ai mbi të cilin u thirr siblings().) Kjo duhet të ndodhë pasi të ketë përfunduar animacioni i parë.

Nëse nuk përdor queue() ose një thirrje mbrapa pas animacionit të parë, ato funksionojnë njëkohësisht.

Nëse përdor queue() ose një thirrje mbrapsht pas të parit, atëherë animacioni i dytë përfundon shumë herë (një herë për secilin nga vëllezërit e motrat).

Pra, si mund të vendos me sukses një animacion për të ekzekutuar një herë pas një animacioni grupor?

(Kam gjetur një hak që funksionon, por shpresoj se ka një mënyrë të duhur për ta arritur këtë.)

Shembull i thjeshtuar:

<html>
<head>
<title>tester page</title>
<style> 
 <!--
.fadebutton, .resizebutton {
cursor: pointer;
color: white;
margin: 10px 0 10px 0;
background: blue;
padding: 2px;
display: table;
}
.box {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
 -->
</style>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript"> 
$('document').ready(function() {
$('.resizebutton').toggle(  function() { $(this).parent().animate({width: '+=50px', height: '+=50px'}, 1000); },
        function() { $(this).parent().animate({width: '-=50px', height: '-=50px'}, 1000); });
$('.fadebutton').click(function() {
 var $theBox = $(this).parent();
 $theBox.siblings().fadeOut(1000, function() { $theBox.find('.resizebutton').click(); });
});
});
</script>
</head>
<body>
<div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
<div class='box'><div class='fadebutton'>Fade</div><div class='resizebutton'>Resize</div></div>
</div>
<div>
<div style="clear: both; padding: 0 0 10px 0; ">Clicking the 'resize' button triggers a toggle that increase or decreases the box's size.</div>
<div>Clicking on the 'fade' button fades the box's siblings, then triggers the 'resize' button in that box. Trouble is that the 'resize' gets fired as many times as there are siblings.</div>
</div>
</body>
</html>
animation queue jquery callback
11.11.2009

Përgjigjet:


1

A duket hakimi juaj diçka si kjo?

$('.fadebutton').click(
function() 
{
 var $theBox = $(this).parent();
 var doneOnce = false;
 $theBox.siblings()
        .fadeOut(1000, 
             function() 
             { 
                  if(!doneOnce)
                  {
                  doneOnce = true;
                  $theBox.find('.resizebutton').click(); 
                  }
             }
 );

Këtu është kodi i punës.

11.11.2009
  • Ah, kjo duket më mirë se e imja. E imja ishte thjesht të kisha një animacion që në thelb nuk bën asgjë paralelisht me animacionet e vëllezërve () . Kështu që unë munda të bëja kthimin e thirrjes nga ai animacion i vetëm. Më pëlqen më shumë e jotja. Pra, duket sikur kjo është një mangësi (e vogël) e jQuery, e cila rregullohet vetëm nëpërmjet hakimeve si ajo që keni dhënë. Jo një punë e madhe, mendoj. Faleminderit per ndihmen! 11.11.2009
  • Eh, nëse do të zgjeroj funksionin $.animate() për të shtuar një flamur për të luajtur një herë, ndoshta do ta zbatoja në një mënyrë të ngjashme. 11.11.2009
  • Përshëndetje! Kam vënë re se kjo është një pyetje mjaft e vjetër dhe po përballem me të njëjtin problem këtu. A ka ndonjë mënyrë të saktë për ta bërë këtë si tani? Nuk mund të gjej asgjë për këtë çështje. 05.04.2011
  • Unë do të thoja se mënyra e duhur është mënyra që funksionon. ;-) Mënyra ime funksionon mirë, është mënyra se si do ta bëja nëse do të më duhej. 18.04.2011

    • 2

    Ju duhet të jeni në gjendje të aktivizoni animacionin e dytë duke kaluar në një thirrje mbrapsht te animacioni i parë, në mënyrë që të njoftoheni se ka përfunduar.

    11.11.2009
  • Nëse nuk po ju keqkuptoj, unë deklarova në pyetjen time se duke bërë këtë shkakton që kthimi i telefonatës të ekzekutohet disa herë (një herë për çdo vëlla ose vëlla). Unë dua që ajo të funksionojë vetëm një herë. Shembulli im ka një kthim kthimi që funksionon disa herë në vend të një herë. Ishte kjo ajo që doje të thuash me 'kalimin në një telefonatë në animacionin e parë'? 11.11.2009
    • Materiale të reja
    Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
    Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..
    Faketojeni derisa ta arrini me të dhënat false
    A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...
    Si të përdorni kërkesën API në Python
    Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..
    Një udhëzues hap pas hapi për të zotëruar React
    Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..
    AI dhe Psikologjia — Pjesa 2
    Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..
    Esencialet e punës ditore të kodit tim VS
    Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..
    Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
    Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..