Getting functions to execute at the right time (queued or concurrently)
-
30-10-2019 - |
Pergunta
I have written a little script that randomly shuffles a series of divs - this works as expected (or hoped).
My problem is in the implementation. I want the divs to fade out, to be shuffled and to fade in again. What I have found is that the function moveBox() executes concurrently with any animation. I have tried calling the it as a callback function to all the elements (fadeOut, delay and fadeIn) in the animation, but always with the same effect - the shuffling and redistribution of the divs happens during the animation, and is therefore visible.
I have a solution (var ts=timeOut...) which makes the shuffle happen while the divs are hidden, but I am not convinced that this is the best solution.
I would like to know how to control the order of execution of functions and whether they should execute concurrently or in sequence. My code :
<style>
.tester{
float:left;
width:100px;
height:100px;
margin:5px;
}
.tester p{text-align:center;
margin-top:20px;
}
.one{background-color:red;}
.two{background-color:yellow;}
.three{background-color:teal;}
.four{background-color:blue;}
.five{background-color:green;}
.six{background-color:silver;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var anibase=jQuery(".tester").length;
jQuery(".tester").fadeOut(1000);
function moveBox(){
function shuffle(){
for (i = 0; i <= (anibase - 2); i++) {
mover = Math.floor(Math.random() * (anibase - i));
if (mover != 0) {
mover = mover + i;
jQuery(".tester:eq(" + mover + ")").insertBefore(".tester:eq(" + i + ")");
};
};
};
jQuery(".tester").fadeOut(1500).delay(500).fadeIn(1500);
var ts = setTimeout(shuffle,1500);
var t=setTimeout(moveBox,5000);
};
moveBox();
});
</script>
<body>
<div class="tester one">
<p>box 1</p>
</div>
<div class="tester two">
<p>box 2</p>
</div>
<div class="tester three">
<p>box 3</p>
</div>
<div class="tester four">
<p>box 4</p>
</div>
<div class="tester five">
<p>box 5</p>
</div>
<div class="tester six">
<p>box 6</p>
</div>
</body>
thanks in advance
Nenhuma solução correta