I created simple function for rotate divs , for this i use setTimeOut and this function tell the script the time for repit the same and go to the next , the problem in my case is i use effects in each transitions and need the callback to the function happend to the end of effect
My function :
<script>
function repiter(id)
{
$(".sd_"+id).show(2000).hide(1000);
var npics=4;
var ret=(id+1);
if (ret>=npics)
{
var ret=0;
}
setTimeout(function(){repiter(ret);},2000)
}
</script>
<div class="sd_0" style="display:none;">Tester 1</div>
<div class="sd_1" style="display:none;">Tester 2</div>
<div class="sd_2" style="display:none;">Tester 3</div>
<div class="sd_3" style="display:none;">Tester 4</div>
<script>
repiter(0);
</script>
As you can see here , the function rotate the 4 divs and the contents , when go to the end repit the first and all time return , but in each case , the effect for each div = 4 or 5 seconds and in middle of animation of div the setTimeout call other time the function and break the effect in each case , by this my question , exists some method in jquery for setTimeout only run when effects it´s finished and after this call other time to the function ?
Thank´s
You can use a .promise():
$(".sd_"+id).show(2000).hide(1000).promise().done(function() {
// now the animations are done
});
Try
<script>
function repiter(id) {
$(".sd_"+id).show(2000, function(){
$(".sd_"+id).hide(1000, function(){
var npics=4; var ret=(id+1);
if(ret>=npics) { var ret=0; }
setTimeout(function(){repiter(ret);},2000)
})
})
} </script>
Related
I am trying to run a simple sequence with text. I want the text to show for a second and then hide() or fadeOut(), then the next() one within the queue to show.
Does anyone see what I am doing wrong? Right now, only the last div is showing.
Side note, can anyone point me to a function or give me an idea of how to make the text slide in from the right, like on this page. https://artversion.com/
$(function() {
$('.cover1-seq').delay(1000).queue(function(next) {
$(this).show().prev().hide();
next();
})
/*.toggle("slide", {
direction: 'right'
}, 1000);*/
});
.cover1-seq {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cover1-seq">
<h1 class="cover1-title">Apple</h1>
</div>
<div class="cover1-seq">
<h1 class="cover1-title">Book</h1>
</div>
<div class="cover1-seq">
<h1 class="cover1-title">Cat</h1>
</div>
The javascript is executing all at once, in the case 3 times the '$(this).delay(1000)', what will happen is that it will execute everything together.
I made an adjustment in your code to run every 1 second:
$(function() {
var i = 0;
$(".cover1-seq").each(function(){
$(this).delay(1000 * ++i).queue(function() {
$(this).show().prev().hide();
});
});
});
Or, as asked, so it keeps repeating. And to execute when the page loads, we add the '$(document).ready':
$(document).ready(function() {
var arr = $(".cover1-seq");
var arrLen = arr.length;
var i = 0;
setInterval(function(){
$(".cover1-seq").hide();
$(arr[i]).show();
i === arrLen ? i = 0 : i++;
}, 1000);
});
I hope I have helped!
I'm using jquery it auto refresh after 10 seconds and every time it refresh it duplicate the div for one time and refresh both of the div's again.
the duplicate happens only one time ..
code:
<div class="tournament-users">
<span class="tournament_reg_teams_num">0/8></span>
</div>
js :
<script type="text/javascript">
var autoLoad = setInterval(
function ()
{
$('.tournament_reg_teams_num').load('normal-l.php .tournament_reg_teams_num').fadeIn(\"fast\");
}, 10000); // refresh page every 10 seconds
</script>
and what i get after 10 seconds is :
<div class="tournament-users">
<span class="tournament_reg_teams_num">0/8></span>
<span class="tournament_reg_teams_num">0/8></span>
</div>
Thanks for the help! :)
Before appeding you have to flush div content using empty().
Please try
$('.tournament-users').empty();
Try using an id instead of a class. Also you could try to build a wrapper for your tournament_reg_teams_num and load it into that.
Try something like this for example:
HTML
<div id="wrapper_tournament_reg_teams_num">
<span id="tournament_reg_teams_num">0/8</span>
</div>
JS
var autoLoad = setInterval(
function ()
{
$('#wrapper_tournament_reg_teams_num').load('normal-l.php #tournament_reg_teams_num').fadeIn(\"fast\");
}, 10000);
HTML:
<div class="test">
<div class="test2">test2</div>
</div>
JS:
var count = 0;
//function autoload : it return the setInterval function
var autoload = setInterval(function(){
//(You can do what you want here, depending on what you want to do)
count += 1;
//Here, I remove the content of "test" element
$('.test').empty();
//I create the new element and add it to "test" element
var element = $('<div></div>').addClass('test2').html('test2');
$('.test').append(element);
console.log(refresh);
}, 10000);
//If you have to stop the refresh
setTimeout(function(){
console.log('clearInterval');
clearInterval(autoload);
}, 6000)
This is only an exemple of auto refresh, hope it can help you !
I´m trying to loop this animation but I don´t know why it does not work ?
I have 4 divs with differences images and I want to loop this to replay again and again.
$(document).ready(function () {
setInterval("comeon()", 2000);
});
function comeon() {
var current = $(".current");
var next = current.next();
if (next.length == 0) {
next = $(".current:first");
}
current.removeClass('current').addClass('previous');
next.css("opacity", "0.0").addClass("current").animate({
opacity: 1.0
}, 500, function () {
current.removeClass("previous");
comeon();
});
What I have done wrong ?
**UPDATE**
<div id="slider">
<div class="current" style="background-color:#F00;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#00F;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#0F0;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#FF3;position:absolute; width:400px; height:400px;"></div>
</div><!-- End slider-->
Please have a look at http://jsfiddle.net/7kt9z/6/
next = $("cur:first");
This is attempting to select an element like <cur>. Oops!
You want:
next = $(".current:first");
or
next = cur.first();
Edit
I finally understand what you need:
next = current.siblings().first();
setInterval needs to be used in a certain way.
You need to assign setInterval to a variable, and this assignment should be attached to an event.
var setIt;
$(window).load(function() {
setIt = setInterval(comeOn, 1000);
});
Since you're using images, you can wait for all the images to load and then starting your slider (that's using the load event to assign setInterval to the variable setIt).
Also, do not wrap your function in qoutes in setInterval. Instead of:
setInterval("comeOn()", 1000)
Do this:
setInterval(comeOn, 1000)
I've got a working example here:
http://codepen.io/anon/pen/rHzpL
I have 10 divs with class "animate" and IDs from "one" to "ten", for example:
<div class="animate" id="six">
bla bla content
</div>
I need to cycle the visibility of these ten layers in a continuous loop.
The method doesn't have to be very efficient, it just has to work OK.
I have tried running them through a for loop and fade in then fade out them one by one but they all became visible at the same time then faded out together at each iteration.
The code I used for that:
layer_ids = ['one','two','three','four','five','six','seven','eight','nine','ten'];
for(i = 0; i < 300; i++)
{
animate_id = layer_ids[i%10];
element_selector = '.animate#'+animate_id;
$(element_selector).fadeIn(1500).delay(1000).fadeOut(1500);
}
I expected that at the first iteration the first one would be shown then hidden, then the second one, etc.
How can I show then hide them in sequence?
Another thing I'd like to know is how I can run this continuously. I tried with a while(1) but the page froze.
Would rather do this without 3rd party plugins if possible.
Smoothly transitions between content.
Use the setInterval milliseconds value to decide how long you would like to display each section.
Add as many DIVs as needed to the HTML, the code will count them.
Demo: http://jsfiddle.net/wdm954/QDQhu/4/
Any specific reason you want to do this with cycle?
Think the same could be accomplished with much less code:
var els = $("div.animate").hide();
function rotate(){
for (var i=0;i<els.length;i++){
$(els[i]).delay(i*1000).fadeIn(1500).delay(1000).fadeOut(1500);
}
setTimeout(rotate, i*1000);
}
rotate();
Example on jsfiddle, and it isn't restricted to the number of elements.
Version 1, fades in the next element while the currently visible element is still fading out. This looks nice if they're positioned on top of each other.
var roller = $('.animate'),
curr = roller.length-1;
function fadeOut() {
roller.eq(curr).fadeOut(1500, fadeIn);
}
function fadeIn() {
curr = (curr+1) % roller.length;
roller.eq(curr).fadeIn(1500, fadeOut);
}
fadeOut();
http://jsfiddle.net/kaFnb/2/
Version 2, fades the next element in only once the previous element has been faded out. This works well when the content isn't positioned on top of each other (like in the fiddle example).
var roller = $('.animate'),
curr = roller.length-1;
function toggleNextRoller() {
roller.eq(curr).fadeOut(1500);
curr = (curr+1) % roller.length;
roller.eq(curr).fadeIn(1500, toggleNextRoller);
}
toggleNextRoller();
http://jsfiddle.net/kaFnb/1/
I put together a little example for you. hope it helps:
$(function () {
function animateBoxes(targetElement, delay) {
var anims = targetElement;
var numnberOfAnims = anims.size();
anims.eq(0).addClass('visible').fadeIn();
setInterval(function () {
$('.visible').fadeOut(function () {
$(this).removeClass('visible').next().addClass('visible').fadeIn();
if ($(this).index() + 1 == numnberOfAnims) {
anims.eq(0).addClass('visible').fadeIn();
}
});
}, delay);
}
animateBoxes($('.animate'), 2000);
});
Html:
<div class="animate visible">
Content 1
</div>
<div class="animate">
Content 2
</div>
<div class="animate">
Content 3
</div>
<div class="animate">
Content 4
</div>
<div class="animate">
Content 5
</div>
CSS:
.animate
{
display:none;
border:solid 1px red;
padding:30px;
width:300px;
}
There was a fade out sample in the internet..
http://docs.dojocampus.org/dojo/fadeOut?t=tundra
but i want to do something different..
i want people directly click on the text then the text will fade out.
in my code there is a div wrap the text
<div id='parentNode'>
<div id='textDiv' onClick='whenClickAnyWhereWithinThisDiv_performFadeOut()'>
<div id='iconDiv'/>
<div id='messageDiv'/>
</div>
<div>
Code as show below, what i want is, when people click anywhere within the textDiv,
then the whole textDiv will fade away..hmm.....why my code doesn`t work???
function whenClickAnyWhereWithinThisDiv_performFadeOut () {
...
...
dojo.connect(dijit.byId('textDiv'), "onClick", fadeOutAndRemove(parentNode, textDiv));
}
function fadeOutAndRemove (parent, currentDiv) {
// just assume i can get the parent Node, and the current div, which will be textDiv
var objectId = currentDiv.getAttribute('id');
dojo.style(objectId, "opacity", "1");
var fadeArgs = {
node: objectId,
duration: 2000
};
dojo.fadeOut(fadeArgs).play();
setTimeout(function() { parent.removeChild(currentDiv);}, 2000);
}
If I understand what you are trying to do, I think you can accomplish it with this:
HTML
<div id='parentNode'>
<div id='textDiv'>
<div id='iconDiv'>this is icon div</div>
<div id='messageDiv'>this is message div</div>
</div>
<div>
JavaScript
// do it when the DOM is loaded
dojo.addOnLoad( function() {
// attach on click to id="textDiv"
dojo.query('#textDiv').onclick( function(evt) {
// 'this' is now the element clicked on (e.g. id="textDiv")
var el = this;
// set opacity
dojo.style(this, "opacity","1");
// do fade out
dojo.fadeOut({
node: this,
duration: 2000,
// pass in an onEnd function ref that'll get run at end of animation
onEnd: function() {
// get rid of it
dojo.query(el).orphan()
}
}).play()
});
});
The click will bubble up so it'll be caught by textDiv.
Here are some helpful links:
Dojo Animation quickstart
dojo.byId vs. dijit.byId
Let me know if I misunderstood your question and I'll update my answer. Hope this helps.