I want to use fadeToggle to fade in and out some images automatically. It's working, but all the images start 'faded in', and I would like them to start invisible, so that they appear one by one. Thanks in advance!
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeToggle(duration, function () {
run_animation($element, delay, duration);
});
}
run_animation($('.pointer1'), 2000, 1000);
run_animation($('.pointer2'), 2500, 1000);
run_animation($('.pointer3'), 3000, 1000);
run_animation($('.pointer4'), 3500, 1000);
run_animation($('.pointer5'), 4000, 1000);
Did you try by hiding images using CSS? Try display:none and if required you can call animation after show().
Related
So I'm trying to create a simple fading slideshow with five slides that repeats when finished.
I feel like what I've got should work, but it's not.
<script type="text/javascript">
$(document).ready(function() {
function playslide(){
setTimeout(function(){
$("#slide-two").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 10000);
setTimeout(function(){
$("#slide-three").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 20000);
setTimeout(function(){
$("#slide-four").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 30000);
setTimeout(function(){
$("#slide-five").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 2000, 'swing')}, 40000);
}
playslide();
});
</script>
The idea is that the first slide will always have its opacity set to 1, so that when the last slide fades out, it's as if it's starting again. Each slide will hold for 10 seconds before fading out and after each slide fades in, the previous slide's opacity will be set back to 0 ready for the next time it repeats.
I hope it's not an obvious mistake. Apologies if it is...
Please why not use a .fadeIn() and .fadeOut() instead?
setTimeout(function () {
$("#slide-two").fadeIn(400, function () {
setTimeout(function () {
$("#slide-two").fadeOut(function () {
$("#slide-three").fadeIn(400, function () {
// So on...
});
}, 1000);
});
}, 1000);
Better to use these functions for doing it instead of you manually animating opacity.
https://jsfiddle.net/sk8ruo3u/
here's how I would do it
var list = ['.one','.two','.three','.four'];
$.each(list, function(index, value){
changeOpacity(value, index*1000);
});
function changeOpacity(target, timeout) {
setTimeout(function () {
$(target).animate({
opacity: 0.05
}, 1000);
}, timeout);
};
I have this code running an animation and I need to to stop and revert to a relatable event after 3 blinks.
$(window).load(function(){
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeOut(duration, function () {
$('.countdown-li').html("<li class='countdown-li'><a>Price updated</a>").fadeIn();
run_animation($element, delay, duration);
});
}
run_animation($('.countdown-li').delay(3000));
});
});
You can use a jQuery timer to stop animation after a certain amount of time you want, so try this script:
<script>
$(window).load(function () {
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeOut(duration, function () {
$('.countdown-li').html("<li class='countdown-li'><a>Price updated</a>").fadeIn();
run_animation($element, delay, duration);
});
}
run_animation($('.countdown-li').delay(3000));
setTimeout("$('.countdown-li').stop();", 5500);
});
});
</script>
I could have used the setinterval timer option found in javascript. http://javascript.info/tutorial/settimeout-setinterval
I wan't to call the animate function when the fadeOut is complete. Not during it's fading out. I think that the "progress" function in fadeOut is the right. Can someone help me I don't know how to apply the "progress" function on my code.
$(".intro").animate({height:'100%', width:'100%'}, 2000, function(){
$(this).append("<div class='text'>Welcome to Progressbar_v1</div>"); $(".text").css({"height":"23px","width":"auto","position":"absolute","top":"0","left":"0","bottom":"0","right":"0","margin":"auto"}).animate({fontSize:'3em'},"slow");
$(".text").fadeOut(4000);
});
$(".intro").animate({height:'30px', width:'500px'}, 2000);
Use .fadeOut() callback
$(".intro").animate({height:'100%', width:'100%'}, 2000, function(){
$(this).append("<div class='text'>Welcome to Progressbar_v1</div>"); $(".text").css({"height":"23px","width":"auto","position":"absolute","top":"0","left":"0","bottom":"0","right":"0","margin":"auto"}).animate({fontSize:'3em'},"slow");
$(".text").fadeOut(4000, function() {
$(".intro").animate({height:'30px', width:'500px'}, 2000);
});
});
The second parameter of fadeOut take a function which is executed when the animation is complete.
Place your code there and see the documentation for more information http://api.jquery.com/fadeout/
$(".intro").animate({height:'100%', width:'100%'}, 2000, function(){
$(this).append("<div class='text'>Welcome to Progressbar_v1</div>"); $(".text").css({"height":"23px","width":"auto","position":"absolute","top":"0","left":"0","bottom":"0","right":"0","margin":"auto"}).animate({fontSize:'3em'},"slow");
$(".text").fadeOut(4000, function() {
$(".intro").animate({height:'30px', width:'500px'}, 2000);
});
});
How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});
a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});
Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();
Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/
I'm looking to get the most efficient way to produce a latest news ticker.
I have a ul which can hold any number of li's and all I need to to loop through them fading one in, holding it for 5 seconds and then fading it out, one li at a time. The list is displaying with an li height of 40px and the well it displays in is also 40px which with overflow: hidden which produces the desired effect. Also to be able to hold the li in place if the cursor hovers over it while its being displayed would be great to build it.
I know there is the jQuery ticker plugin that is widely used (ala the old BBC style) but I've tried to use it and it seems so bulky for the simplicity I need and it plays havoc with the styling I use.
I've been using this so far:
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tickOut () }, 5500);
But it doesn't actually fade in the next li so the effect is a bit messy.
If someone could suggest some alternations to help produce the effect I need that would be so useful.
Thanks
hide() and call fadein() the element after it becomes the top of the list.
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker'))
$('#ticker li:first').hide()
$('#ticker li:first').fadeIn(1000)
$('#ticker li:not(:first)').css('opacity', '1')
});
}
setInterval(function(){ tickOut () }, 5500);
see:
http://codepen.io/anon/pen/lHdGb
I woudl do it like that:
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker')).css('opacity', 1); });
}
var interval;
$(function() {
interval = setInterval(function(){ tickOut () }, 5500);
$('#ticker').hover(function() {
if(interval)
clearInterval(interval);
$('#ticker li:first').stop();
$('#ticker li:first').css('opacity', 1).stop();
}, function(){
interval = setInterval(function(){ tickOut () }, 5500);
});
});
See $('#ticker').hover which clears interval and stops animation and returns opacity to 1 when mouse got inside UL (may be changed to do that when only some special element inside LI is under mouse) and starts it again once it left that UL. Demo: http://jsfiddle.net/KFyzq/6/