Load List Items dynamically with JQuery - javascript

I'd like to structure my JQuery to fade in each individual item at a time. Here's an example of the behavior, and here's the JQuery I have so far:
$('li').css('display', 'none') .delay(1000).fadeIn(800)

This probably not the best solution but it should work:
$('li').each(function(i){
var el = this;
setTimeout(function(){
$(el).fadeIn(800);
},800*i)
});
Just for fun, a recursive version:
function animateLi(i){
$('li').eq(i).fadeIn(800);
if ($('li').eq(i+1).length>0)
{
setTimeout(function(){animateLi(i+1)},800);
}
}
animateLi(0);

Maybe something like this:
var delay = 500, t = 0;
$("li").css('display', 'none').each(function(){
t += delay;
var $li = $(this);
setTimeout(function(){
$li.fadeIn();
},t);
});

Loop through the li, and use setTimeout to queue the animation for that li.
$('li').each(function () {
var li = this;
animateLi = function () {
li.fadeIn(800);
}
setTimeout(animateLi, timeout);
timeout += 100;
});

A slight variation on Ivans method
$(function() {
$('ul li:hidden').each(function(idx) {
setTimeout(function(el) {
el.fadeIn();
}, idx* 1000, $(this));
});
});
And a recursive function using fadeIn callback function instead of setTimeout
function DisplayOneByOne(){
$('ul li:hidden:first').fadeIn('2000', DisplayOneByOne);
}

Here is how you do it:
var delay = 200, t = 0;
$("li").css('display', 'none').each(function(){
t += delay;
var $li = $(this);
setTimeout(function(){
$li.fadeIn(1900);
},t);
});

There is another way to fade in elements after each other:
$.fn.fadeInNext = function(delay) {
return $(this).fadeIn(delay,function() {
$(this).next().fadeInNext();
});
};
$('li').hide().first().fadeInNext(1000);

Related

Jquery - hasclass after delay

I want to check if an element has a class after some time. Like delay. Basically the class is being added to the element by some other function. So If I check the hasClass on that clicked element it returns false.
var check_selected = $(this).hasClass('selected');
if ( $(this).hasClass('selected').delay(500) ) {
console.log(check_selected);
}
This is what I am trying but I want to know if we can add delay to hasClass, or any other way to achieve this. But it is not working
As per answers suggested I tried this -
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(this).hasClass('selected') ) {
console.log(check_selected);
}
}, 500);
But no outcome now in console.
Just to update -
The class is being applied on click, and the same click I basically wants to know if the class is applied, so I am using hasclass. Is there any other way out, or am I doing it wrong
EDIT -
var _this = this;
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(_this).hasClass('selected') ) {
console.log(check_selected);
}
}, 5000);
I am trying this but still getting false
UPDATE -
var checkSelected = setInterval(function(){
var check_selected = $(_this).hasClass('selected');
if(check_selected) {
clearInterval(checkSelected);
}
console.log(check_selected);
}, 500);
This worked!!
Try setTimeout for simulating the delay. And if you want to test this repeatedly until you get it selected you can try setInterval(function(){}, interval). You need to call clearInterval if you want to stop calling the function.
$("#test").on("click", function(){
const component = $(this);
setTimeout(function(){
component.addClass("selected");
}, 600);
setTimeout(function(){
var check_selected = component.hasClass('selected');
console.log(check_selected);
}, 500);
var checkSelected = setInterval(function(){
var check_selected = component.hasClass('selected');
if(check_selected) {
clearInterval(checkSelected);
}
console.log(check_selected);
}, 500);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">Check my class</div>
you can use setTimeout its javascript function that does callback execution after the miliseconds passed in as second parameter
var check_selected = $(this).hasClass('selected');
setTimeout(function(){
if ( $(this).hasClass('selected') ) {
console.log(check_selected);
}
}, 500);
You can use timer function
var currObj = this;
setTimeout(function(){
var check_selected = $(currObj ).hasClass('selected');
if ($(currObj).hasClass('selected')) {
console.log(check_selected);
}
},500);

Reverse jQuery effect after a given time

one quick question!
I am using the following code which does a "flip" card effect to flip a specific div element, when a certain link is mouse clicked. Is it possible to make the "flip" effect reverse after some time? Exactly as if I was clicking again with the mouse, but timed. I can do it now by cliking, but I would like to time it.
$(document).ready(function () {
$('.flip_card').click(function () {
var x = $(this).attr("id");
var i = x.substring(10);
$('.flip' + i + '').find('.card').toggleClass('flipped');
});
});
I have tried using the jquery functions delay() or settimeout, but I can only achieve that the first "flip" effect is delayed and happens after certain time. That is not what I want...
I hope my question is understanble enough.
Many thanks!
Try this.
$(document).ready(function () {
$('.flip_card').click(function () {
var x = $(this).attr("id");
var i = x.substring(10);
var ele = '.flip' + i + '';
$(ele).find('.card').toggleClass('flipped');
setTimeout(function(){
$(ele).find('.card').toggleClass('flipped');
}, 1000);
});
});
Try utilizing .queue()
$(document).ready(function () {
$(".flip_card").click(function () {
var x = this.id;
var i = x.substring(10);
$(".flip" + i).find(".card").toggleClass("flipped")
.queue("reset", function() {
setTimeout(function() {
$(".flip"+ i + " .card.flipped:eq(-1)").toggleClass("flipped");
// set duration here
}, 3000);
}).dequeue("reset");
});
});
You can use setTimeout(), but you should keep track of the timer ID so you can cancel it if the user clicks again before the timeout has executed. You can use the .data() function to store the timer ID so each card keeps track of its own timer ID.
$(document).ready(function () {
$('.flip_card').click(function () {
var i = $(this).attr('id').substring(10);
var $card = $('.flip' + i).find('.card');
// Clear the timeout if there is one.
var timerId = $card.data('timerId');
if (timerId) {
clearTimeout(timerId);
}
// Flip the card.
if (!$card.hasClass('flipped')) {
$card.addClass('flipped');
// Set the timeout so the card is flipped back after 3 seconds.
$card.data('timerId', setTimeout(function () {
$card.removeClass('flipped');
}, 3000));
} else {
$card.removeClass('flipped');
}
});
});
jsfiddle
How about something this simple. Just chaining should make it.
$(document).ready(function () {
$('.flip_card').bind('click', function() {
var x = $(this).attr("id");
var i = x.substring(10);
var ele = '.flip' + i + '';
$(ele).find('.card').toggleClass('flipped').delay(3000).toggleClass('flipped');
});
});

Run a function after each function

For some reason, I can't get a function to run after the each function is complete. This is what I tried and the each function works perfectly but it does not run the other function when it is complete.
var delay = 0;
$('h1 span').each(function() {
var $span = $(this);
setTimeout(function() { $span.addClass('visible'); }, delay+=1000, function(){
$('header').addClass('visible');
});
});
If i understand your expected behaviour, you can use following logic inside delayed function:
var delay = 0;
$('h1 span').each(function () {
var $span = $(this);
setTimeout(function () {
$span.addClass('visible');
// if $span is last of 'h1 span' matched set
if ($span.is($('h1 span').last())) {
$('header').addClass('visible');
}
}, delay += 1000);
});
-DEMO-
I think what you want to do is this http://jsfiddle.net/gon250/8mdodywe/
setTimeout() function doesn't support two callbacks.
$.when($('span').each(function() {
$(this).addClass('visible');
})).then(function(){
$('header').addClass('visible');
});
I guess that's what you want:
var delay = 0;
$('h1 span').each(function() {
var $span = $(this);
setTimeout(function() { $span.addClass('visible'); }, delay+=1000);
});
setTimeout(function() { $('header').addClass('visible'); }, delay);
Check it out: http://jsfiddle.net/zsm4xegr/
I'm assuming, you want two timeouts? From your Code it seems you would like to execute the first timeout after "delay 0". In that case simply execute the first "callback" and set a timout for the second.
If you do indeed want two timeouts (each after 1000ms):
$('h1 span').each(function() {
var $span = $(this);
setTimeout(
function() {
$span.addClass('visible');
setTimeout(
function() {
$('header').addClass('visible');
},
1000
);
},
1000
);
});

Stop a jquery loop function on click while adding class

I have a function that continuously loops through a set of divs (see below) with the class active. I'm trying to modify the function so that when you click on the div it stops the loop and adds the class active to that div.
I've looked through countless examples on StackOverflow, but haven't been able to find something that works for my situation.
Function I'm trying to modify:
function doLoop() {
$('.cd-types, .img-frame, .img-content-container').each(function(){
(function($set){
setInterval(function(){
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
},7000);
})($(this));
});
}
Here is the jfiddle with my attempt on modifying the loop. I know its fairly simple and I've spent the last few hours trying to figure it out. Any advice/direction would be greatly appreciated.
Try
function doLoop() {
$('.cd-types, .img-frame, .img-content-container, .list-items').each(function () {
var $set = $(this);
var interval = setInterval(function () {
var $cur = $set.find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
$next.addClass('active');
}, 1000);
$set.data('loop', interval);
$set.on('click', '> *', function () {
$(this).addClass('active').siblings('.active').removeClass('active');
clearInterval($set.data('loop'));
$set.removeData('loop')
});
});
}
Demo: Fiddle, Fiddle2
Simplified the loop function a bit to use the "self" variable trick.
timerID was used to track the setInterval() call so that it could be stopped using clearInterval() call when clicked:
$('.list-items').children().first().addClass('active');
var timerID;
$('.list-items').each(function () {
var self = this;
timerID = setInterval(function () {
var $cur = $(self).find('.active').removeClass('active');
var $next = $cur.next().length ? $cur.next() : $(self).children().eq(0);
$next.addClass('active');
}, 1000);
});
$('.list-items').on('click', function(){
clearInterval(timerID);
alert("Stopped");
});
See the working code at:
JSFiddle

jquery/javascript set multiple timeouts one after the other via loop to run independently of the other

I am trying to animate a handful of DIV's to scroll upwards but I want one to scroll up after a pause after the other after the other. And the best I can come up with at the moment is
$('.curtain').each(function()
{
var $elem = $(this);
setTimeout(function()
{
$elem.animate({"height":0+'px'}, 2000);
}, 1000);
});
Problem is they still all animate together without pause. How can I go about doing something in this fashion. The divs are dynamically generated and there can be 5 - 20 of them so doing a hardcoded logic is out, any ideas?
function animateIt () {
var elems = $('.curtain').get();
(function next() {
if(elems.length){
var elem = $(elems.shift());
elem.animate({"height":0+'px'}, 2000, next);
}
})();
}
animateIt();
running example
Another way like queue
function animateIt () {
var divs = $('.curtain');
divs.each( function(){
var elem = $(this);
$.queue(divs[0],"fun", function(next) { elem.animate({"height":0+'px'}, 2000, next); });
});
divs.eq(0).dequeue("fun");
}
Looks like a simple recursive function might work for you here -
function doAnimation(elapsed){
var iterations = $('.curtain').length;
var current = elapsed+1;
if (current <= iterations){
setTimeout(function(){
$('.curtain:eq(' + elapsed + ')').animate(...);
doAnimation(current);
},50);
}
}
doAnimation(0);
Here's a simple demo

Categories

Resources