I build this scraping out the answers on stackoverflow. What i want to achive:
For each .element in .element-wrapper add the class .visible with delay 1000ms .
$('.element-wrapper').children('.element').each(function(i) {
var $item = $(this);
setTimeout(function() {
$('.element').addClass('visible');
}, 1000 * i);
});
Actually you are almost right... Just change one line below to make it context sensitive to the current wrapper:
$('.element-wrapper').children('.element').each(function(i) {
var $item = $(this);
setTimeout(function() {
$item.addClass('visible'); // Change this line.
}, 1000 * i);
});
Related
how can I execute a function in a loop in a way that the next element in the loop is only executed when the previous element has been done.
$(".welcome>p").each(function() {
var $this = $(this);
setTimeout(function() {
$this.animate({
opacity: 1
}, 600);
});
});
So, all the p element in this code will be running at the same time. How can I change it so that the p element will show up one by one by its order?
Thanks,
YonL
The first argument of each is index, so you could use that index to increment the setTimeout like:
$(".welcome>p").each(function( idx ) {
var $this = $(this);
setTimeout(function() {
$this.animate({
opacity: 1
}, 600);
}, idx * 600);
});
i have 3 div elements with class name gridbox
i want to add a class into all 3 elements with delay.
for example:
new class should be added to all 3 div elements with a delay between each of them.
i triel following code which is not working.
$('.gridbox').addClass('animation').delay(1500);
What is wrong here?
You could try something like this:
var divs = $( '.gridbox' );
var index = 0;
var delay = setInterval( function(){
if ( index <= divs.length ){
$( divs[ index ] ).addClass( 'animation' );
index += 1;
}else{
clearInterval( delay );
}
}, 1500 );
What I'm doing here is this:
Extract all of the elements and store them in the divs variable.
Save an index of the element you are currently working with.
Initiate a setTimeout function with a delay of 1.5 seconds.
If we are not at the end of the list of elements, add the class to the relevant element after converting it to a jQuery element.
Increment our index variable.
Stop the setTimeout once we have iterated over all of the elements.
$('.gridbox').each(function(i) {
(function(self, j) {
setTimeout(function() {
$(self).addClass('animation');
},(j*1500)+1500);
})(this, i);
});
FIDDLE
$('.gridbox').each(function(index) {
var that = this;
setTimeout(function() {
$(that).addClass('animation');
}, 1500 * index);
});
if you want to apply a delay on a jquery function such as addClass you need to use a javascript setTimeout because as described here .delay() is limited and should be used for jQuery effects
You can try combination of .each() and setTimeout
$('.gridbox').each(function (index) {
var $this = $(this);
setTimeout(function () {
$this.addClass('animation');
}, 1500 * index );
});
Fiddle DEMO
a nicer solution :)
var st = setInterval(function(){
var gb = $('.gridbox:not(.animation):eq(0)');
gb.length > 0 ? gb.addClass('animation') : clearInterval(st);
},1500)
http://jsfiddle.net/jR984/
You can do this without jQuery
function addClass () {
var div = document.getElementsByClassName("aaa");
div[0].className = "bbb";
setTimeout(addClass, 1000);
}
window.onload = function () {
addClass();
}
http://jsfiddle.net/khGCv/
Although setTimeout/Interval kinda "works", jquery provides a much cleaner way to do custom animations: queue, for example:
$(".gridbox").each(function() {
var box = this;
$("body").queue(function(next) {
$(box).addClass("animation");
next();
}).delay(1000)
});
I am very new to jQuery, JavaScript, etc
I have been working on trying to get a couple of animations going:
Currently I have a partial working demo located here: http://jsbin.com/uwonun/64/
Thanks to jwags, the 2nd .animate() works.
I have been trying to implement the same animation effect so that I can replace the .slideDown().
My latest attempt to get it working can be found here: http://jsbin.com/OYebomEB/1/
Please be aware that as continu to work on this, the code will change.
function anim_loop(index) {
$(elements[index]).css({top: 0, display: 'none'}).animate({top: -75},1000, function() {
var $self = $(this);
setTimeout(function() {
$self.animate({top: $(window).height() + 10}, 1000);
anim_loop((index + 1) % elements.length);
}, 3000);
});
}
You set display:none, but never show it up after.
Use css('display','block') in your setTimeout(), before animate():
setTimeout(function() {
$self.css('display','block').animate({top: $(window).height() + 10}, 1000);
anim_loop((index + 1) % elements.length);
}, 3000);
});
You can make it appear smoothly by setting opacity:0 at the initialization, and opacity:1 in your second animate() ;)
Edit
To get the first loop working as the others, you have to display your elements before they render onscreen, by setting display:block before the animate() :
function anim_loop(index) {
$(elements[index]).css({top:-75, display: 'block'}).animate({top: '+0'},1000, function() {
var $self = $(this);
setTimeout(function() {
$self.animate({top: $(window).height() + 10}, 1000);
anim_loop((index + 1) % elements.length);
}, 3000);
});
}
$('#test').hover(
function () {
$(this).append('Blah');
}
);
How can I make the jQuery repeatedly append Blah in #test based on how long you are hovering over #test?
For instance, how can I append Blah once every second you are hovering over #test?
You could use setInterval like this :
var myInterval = false;
$('#test').hover(
function(){
$that = $(this);
// need to save $(this) as 'this' will be different within setInterval
myInterval = setInterval(function(){
$that.append('Blah');
}, 100); // repeat every 100 ms
},function() {
clearInterval(myInterval); // clear the interval on hoverOut
}
);
Working example here
(function() {
var intv;
$('#test').hover(
function () {
var $this = $(this);
intv = setInterval(function() {
$this.append('Blah');
}, 1000);
},
function() {
clearInterval(intv);
}
);
}());
I've enclosed all the code inside a anonymous scoped function so to not pollute global scope, and I cached a reference to $(this) to avoid a new evaluation every second, inside the timeout
You can use setInterval to do so:
var appending; //var to store the interval
$('#test').hover(function(){ //on mouseenter
var $this = $(this); //store the context, i.e. the element triggering the hover
appending = setInterval(function(){ //the following function gets executed every second until the interval is cleared
$this.append('<p>Blah</p>'); //append content to context
},1000); //1000 meaning the repetition time in ms
},function(){ //on mouseleave
clearInterval(appending); //clear the interval on mouseleave
});
use setInterval()
$('#test').hover(
function () {
setInterval(function() {
$(this).append('Blah');
},1000)
}
);
Target: Object user will hover over to bring up secondary DOM
Tooltip: Fixed DOM object positioned about 10-15px below target
I have made a jquery "tooltip" plugin. This plugin allows users to hover over a DOM object, and will show the "tooltip". I want users to be able to move their mouse from the target to the tooltip without it disappearing the second their mouse leaves the target.
I have tried this:
var hoverTimeout;
data.target.hover(function(){
$this.tooltip('show');
}, function(){
hoverTimeout = setTimeout(function(){
$this.tooltip('hide');
console.log('hey');
}, 1000);
});
data.tooltip.hover(function(){
data.tooltip('show');
clearTimeout(hoverTimeout);
}, function(){
data.tooltip('hide');
});
However, this seems to stop the Tooltip from hiding. The reason I'd like to do this, is so forms can be used, text can be copied, etc., in the tooltip.
I'm hoping something like a setTimeout and clearTimeout will work as I don't want to use hoverintent plugin.
Thank you so much in advance!
You should use the timer both ways:
var hoverTimeout;
data.target.hover(function()
{
hoverTimeout && clearTimeout(hoverTimeout);
$(this).tooltip('show');
},
function()
{
var $this = $(this);
hoverTimeout = setTimeout(function(){
$this.tooltip('hide');
}, 1000);
});
data.tooltip.hover(function()
{
hoverTimeout && clearTimeout(hoverTimeout);
},
function()
{
var $this = $(this);
hoverTimeout = setTimeout(function(){
$this.tooltip('hide');
}, 1000);
});
You should probably combine the two, since you're anyhow doing the exact same thing on both of them:
var hoverTimeout;
data.target.add( data.tooltip ).hover(function()
{
hoverTimeout && clearTimeout(hoverTimeout);
$(this).tooltip('show');
},
function()
{
var $this = $(this);
hoverTimeout = setTimeout(function(){
$this.tooltip('hide');
}, 1000);
});
var hoverTimeout;
data.target.hover(function()
{
$this.tooltip('show');
clearTimeout(hoverTimeout);
}, function()
{
hoverTimeout = setTimeout(function(){
$this.tooltip('hide');
}, settings.delay);
});
data.tooltip.hover(function()
{
clearTimeout(hoverTimeout);
}, function()
{
hoverTimeout = setTimeout(function(){
$this.tooltip('hide');
}, settings.delay);
});