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
Related
I am currenly in the process of learning javascript and one of my tasks is to loop through all divs with a particular class name and show/hide them one by one with a catch where the timing for every div is different and the correct value is stored in the data-attribute tag in every div with that particular class name.
window.onload = function(){
alpha();
}
function alpha(){
var dataAttribute = 1000;
$(".element").each($).wait(dataAttribute, function(){
$(this).show().delay(dataAttribute).queue(function(){
$(this).hide();
});
});
}
.element{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.js"></script>
<div class="element" data-attribute="1000">One</div>
<div class="element" data-attribute="2000">Two</div>
<div class="element" data-attribute="3000">Three</div>
<div class="element" data-attribute="4000">Four</div>
<div class="element" data-attribute="5000">Five</div>
My initial idea for solving this problem was to replace the dataAttribute variable with $(this).data("attribute"), but if I do that the .wait property stops working. However, this method works perfectly fine with the .delay property. I would be extremely grateful if someone could help me and explain what I am doing wrong. (Also, if I can get rid of the additional timing library that would be a major bonus, but without it I was not able to loop through the classes after some sort of delay.
You can use something like this:
function alpha(i = 0) {
var element = $(".element:eq(" + i + ")");
var time = parseInt(element.attr("data-attribute"));
element.show().wait(time, function() {
$(this).hide();
i++;
if (i < ($(".element").length))
alpha(i);
});
}
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!
Here's a simple animation i'm trying to make. The divs array carries the id of different divs. The loop function simply loops through the array and shows the divs and hides them making it like a slideshow. For some reason, both divs show at the same time and then hide at the same time. I just couldn't figure out why...please help out! Thanks!
Edit:I think the javascript loop isn't waiting for the JQuery animation to finish. I think ill have to use the setInterval function? Can someone tell me how I can use it here?
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
var divs=["#slide1","#slide2"];
function loop(){
for (var i=0;i<divs.length;i++)
{
$(divs[i]).show(1000).hide(1000);
}
}
$(document).ready(function(){
//$("#slide1").show();
loop();
});
</script>
</head>
<body>
<div id="slide1" style="display:none">ONE</div>
<div id="slide2" style="display:none">TWO</div>
</body>
</html>
How about this:
jsFiddle example
var divs = ["#slide1", "#slide2"];
function loop() {
var elem = divs.shift();
$(elem).show(1000).hide(1000, function () {
divs.push(elem);
loop();
});
}
$(document).ready(function () {
//$("#slide1").show();
loop();
});
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>
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;
}