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);
});
}
Related
I have an tag that is having its contents changed via jquery and then faded in and out (using the velocity js library) utilizing the setInterval function. When I run this it tends to work fine for about 30 seconds before it starts to malfunction and jquery starts to change the contents of the tag before the tag has faded out.
Here is the Javascript code
let counter = 0;
function chooseWord() {
let words = ["foo", "bar", "foo"];
if (counter !== 2) {
counter += 1;
} else {
counter = 0;
}
return words[counter];
}
function refreshText() {
$("#div").text("Foo " + chooseWord())
.velocity("fadeIn", {
duration: 2500
})
.velocity("fadeOut", {
delay: 1500,
duration: 2500
});
}
$(document).ready(function() {
refreshText();
setInterval(function() {
refreshText();
}, 7000);
});
And here is my tag that is being used
<h1 class="foobar" id="div"></h1>
I've tried using Jquery's timer and I have the same issue. Does anyone know what the problem might be or maybe a different way of achieving what I want to do?
You just need to change the order of operations. I have moved the text-change command after fade-out. So the element fades out, and then jQuery will update its text.
$("#div")
.velocity("fadeIn", {
duration: 2500
})
.velocity("fadeOut", {
delay: 1500,
duration: 2500
})
.text("Foo " + chooseWord());
Fiddle: https://jsfiddle.net/Nisarg0/gLed0h1y/
So I have the code below for a auto typing text animation. The text is in front of a image and I want people to see the full picture first and then the text starts to "type". I guess the best way is to add a 2-3 seconds delay before the text starts to animate but I'm not really sure how to do that.
Help would be very much appreciated. Thanks!
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}
$(document).ready(function() {
setInterval('cursorAnimation()', 1000);
});
var text = 'TEXT GOES HERE';
$.each(text.split(''), function(i, letter) {
setTimeout(function() {
$('#container').html($('#container').html() + letter);
}, 110 * i);
});
Adding some arbitrary delay is NOT the best way. You never know how much time an image will take to load on different kinds of networks, some are very fast, others might be very slow.
Instead you should fire your code on some event e.g. when the image has loaded. You can run your code on window load as an option as shown below:
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}
$(document).ready(function() {
setInterval('cursorAnimation()', 1000);
$(window).on("load", function(){
// do here tasks that you want to run after all page assets e.g. images have been loaded
showText();
});//window load()
});
function showText() {
var text = 'TEXT GOES HERE';
$.each(text.split(''), function(i, letter) {
setTimeout(function() {
$('#container').html($('#container').html() + letter);
}, 110 * i);
});
}
Try using setTimeout() function to call your function after some time i.e
$(document).ready(function() {
setTimeout(yourfunction(), 1000); //changes milliseconds as per your need.
})
https://www.w3schools.com/jsref/met_win_settimeout.asp
Generaly. It is done that you pack delayed code into callback and that callback you pass into setTimeout method. For preserving functionality while working in objects. I recomentd to call bind(this) on packaged callback.
setTimeout(function () {
console.log("Delayed message");
}.bind(this), 3000);
In your case
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}
$(document).ready(function() {
setInterval('cursorAnimation()', 1000);
});
var text = 'TEXT GOES HERE';
setTimeout(function () {
// delayed code
$.each(text.split(''), function(i, letter) {
setTimeout(function() {
$('#container').html($('#container').html() + letter);
}, 110 * i);
});
// end of delayed code
}.bind(this), 3000);
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);
});
I'm trying to loop an "animation" of adding and removing classes:
function loading() {
$('#loading').removeClass().addClass('load0').delay(5000).removeClass().addClass('load1').delay(5000).removeClass().addClass('load2').delay(5000).removeClass().addClass('load3').delay(5000, loading);
}
loading();
Two problems:
It doesn't appear that removeClass() and addClass() can be queued with delay().
delay() doesn't appear to accept a callback function.
How can I do this?
var l = $('#loading'),
i = 0;
(function loading() {
l.removeClass().addClass('load' + i);
i = ++i % 4;
setTimeout(loading, 5000);
})();
Or we can encapsulate the variables too.
(function loading(l, i) {
l.removeClass().addClass('load' + i);
setTimeout(function() {
loading(l, ++i % 4);
}, 5000);
})($('#loading'), 0);
Modern browsers make this a little cleaner.
(function loading(l, i) {
l.removeClass().addClass('load' + i);
setTimeout(loading, 5000, l, ++i % 4);
})($('#loading'), 0);
You cannot use delay for non animating functions
Using setTimeout instead with your own callbacks might work out better.
If we're trying to loop animations why not loop animations using the .animate() with callbacks?
Example Fiddle:
http://jsfiddle.net/Culyx/fsxpZ/1/
The "arrow" in the fiddle used to be an image just a place holder div at the moment; but that should be another way of looping animations in jquery. Code for the looping animations:
$(document).ready(function () {
//looping bouncing arrow animation and speed controls
var arrowSpeed = 400;
bounceLeft = function () {
$(".arrow").animate({
left: "+=50px"
}, {
duration: arrowSpeed,
complete: bounceRight
});
}
bounceRight = function () {
$(".arrow").animate({
left: "-=50px"
}, {
duration: arrowSpeed,
complete: bounceLeft
});
}
bounceLeft();
});
Is it possible to trigger a function mid way through an animation?
The animation includes a solid block which swipes over an image from top to bottom - I would like to trigger a function at the point that the image is completely covered and remove the image from the html (mid way through the animation)
My current function is -
function animateCover() {
$('#cover').animate({ bottom: '1400px'}, 4000, function() { });
}
The image is completely covered at 800px point - can I access this property to trigger a function?
since there isn't a tick counter in jQuery, you need to "emulate" it:
function animateCover() {
var
$cover = $('#cover'),
interval = setInterval(function(){
if ($cover.is(':animated')){
if (parseInt($cover.css('bottom')) > 800){
alert('trigger');
clearInterval(interval);
}
} else {
clearInterval(interval);
}
}, 13); // 13 is the minimum possible in Javascript
$cover.animate({ bottom: '1400px'}, 4000, function() { $cover.text('done'); });
}
jsFiddle: http://jsfiddle.net/emV4p/1/
What about splitting the animation into 2.
function animateCover() {
$('#cover').animate({ bottom: '700px'}, 2000, function() {
$('#imgID').hide();
$('#cover').animate({ bottom: '1400px'}, 2000 );
});
}
Updated: Here's a perfectly working solution with minimal code-
WORKING DEMO
jQuery-
$(document).ready(function(){
setInterval(function(){
$("#image").css('background-image','none');
},2000);
$("#block").animate({
bottom:'400px'
},3000);
});