We Keep Coding

Fading in a Javascript Object after a certain Time

So I have particle object in JavaScript which is called after a certain Time simply like this:
setTimeout(function() {
particle();
}, 3000);
Now I want this object to be faded in slowly to the canvas after the 3 seconds but I don't know how. I have tried using the jQuery fadeIn() function but it did nothing to the object.
EDIT: I am using the library particles.js from https://vincentgarreau.com/particles.js/ if you want to see the whole logic behind particle();. You can find a working code snippet there. I have not changed the code by a lot except for the styling of the particles.
Thanks a lot

i would do it with jquery the following way. my way of doing it requires jquery easing plugin. you hve to grap the corresponding DOM-element and do some animation on it.
$(document).ready(function () {
var headline = $("#app-title");
// Do time out here
headline.css({'opacity': 0});
headline.show();
headline.animate({opacity: 1}, {
step: function (now, mx) {
headline.css({'opacity': opacity});
},
duration: 800,
complete: function () {
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});

jQuery transitions: on load and after for each click, an addClass

Well, let me try to explain my gol:
I did a small project (Random Quote Machine from ferecodecamp.com), and it is quite functional. But I want to make it like an slide show (Power Point) with transitions.
See what I have for now Random Quote Machine project
The page should load the quote making a transition from zero opacity to total.
2 .When I click button generate, it should change the quote and again, it should be a quote thate comes from 0 opacity to 1.
The CSS could be something like:
span, i, footer{
opacity: 0;
}
.transitions {
transition-duration: 1s;
opacity: 1;
}
span, i, footer goes from 0 to 1 on opacity with a transition-duration of 1 second.
I tried some jQuery but nothing had gone well the way I want
<script type="text/javascript">
//for page load
$(".quote").load(function(){
$(".quote").addClass("transitions");
});
//for new quote generated
$(".button").click(function() {
$(".quote").fadeOut("slow", function() {
$(this).addClass("quote");
});
$(".quote").fadeIn("slow", function() {
$(this).addClass("quote");
});
});
</script>
Fist part doesn't work at all. The .load event has never worked and .ready just works with a .click event.
Second part, partialy works, but it first desapears and after apears. I want to be desapeared (0 opacity) to total apear...
I've been trying for two long days and nothing is going realy well. I would be really glad in read some suggestions.
Thanks in advance!

I would do it like this:
// equivalent to $(document).ready(function()
$(function() {
// define an array of elements to fade
var elements = [$('#quote'), $('#author')];
fade(); // call a custom function defined below which will execute on page load
// on .button click, call the same function
$('.button').click(fade);
function fade() {
// for each element in elements (defined above), execute jQuery's hide() method and then fadeIn()
$.each(elements, function(index, element) {
element.hide().fadeIn();
});
}
});
If you paste this in the console within your project, it works nicely.

note: $.load() was deprecated in jQuery version 1.8.
This should be what you wanted:
$(document).ready(function(){
$(".quote").fadeIn(1000);
});
$(".button").click(function() {
$(".quote").fadeOut(1000, function() {
// change the quote here
$(".quote").fadeIn(1000);
});
});
.quote {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">new</button>
<div class="quote">quote</div>

Calling function after animation complete

I have 2 functions to open & close a sidebar on my page.
function closeSidebar(functionAfterClose) {
var functionAfterClose = functionAfterClose || function() {};
$("#sidebar").removeClass("open");
$("#sidebar").animate({marginLeft: margin*-1},"fast", "swing", functionAfterClose);
$("#dummy-column").animate({marginLeft: margin*-1},"fast", "swing");
}
function openSidebar() {
$("#sidebar").addClass("open");
$("#sidebar").animate({marginLeft:0},"fast", "swing");
$("#dummy-column").animate({marginLeft:0},"fast", "swing");
}
I'm trying pass function to closeSidebar() to run after the close animation is complete. But it seems to run straight away rather than waiting for the sidebar animation complete.
closeSidebar(function() {
alert("function called");
$(this).addClass("current");
openSidebar();
});
What am I missing to make the function call once the animation is complete?
The jsFiddle - Click a button on the right side, it should animate in, call the function, then animate back out again.

Your javascript is correct. The problem is in the CSS. You have a transition set up for the margin attribute. Erase that and your JS works fine.

Control the Duration Of The Fade Function In MooTools 1.2

I'm using a very simple fade function with MooTools 1.2 (I 'have' to use MooTools 1.2 due to a complication over another function being called on the same page). I'm basically fading a title in on my page. Everything works great but I can't seem to find documentation on how to control the duration simply. Everything I find seems to refer to other functions and I'd like to keep this as simple as possible. Here's the javascript I've got:
window.addEvents({
load: function(){
var singleImage = $('myimage2');
singleImage.set('styles', {
'opacity': 0,
'visibility': 'visible'
});
singleImage.fade('in');
}
});
So as you see, it takes an image with id="myimage2" (which I have initially hidden with CSS) and fades in when the document is ready. It fades in quickly and I'd like it to fade in more gradually. Any ideas? Thanks.

Using the example from your previous question - http://jsfiddle.net/RNeS5/208/
// set-up an event on the browsers window
window.addEvents({
// be sure to fire the event once the document is fully loaded
load: function(){
// assing 'singleImage' variable to the image tag with the 'image' ID
var singleImage = $('image');
// set a bunch of CSS styles to the aforementioned image
singleImage.set('styles', {
'opacity': 0,
'visibility': 'visible'
});
// fade in the image
singleImage.set('tween', { duration: 2000 }).fade('in');
}
});

setTimeout speeds up with multiple tabs

I’m having a setTimeout problem similar to this one. But that solution doesn't help me since I can’t use php in my file.
My site has a slider with a list of images that move every 8 seconds.However, when I have opened a few tabs in the browser and then switch back again, it goes nuts.
The slider proceeds to move the images one after the other immediately without the 8 second timedelay.
I'm only seeing it in Chrome and the latest Firefox.
**EDIT: I checked with console.log() and the setTimeout returns the same number before and after the clearTimeout. Not sure why. Maybe that also has something to do with it? **
EDIT 2: I added a fiddle: http://jsfiddle.net/Rembrand/qHGAq/8/
The code looks something like:
spotlight: {
i: 0,
timeOutSpotlight: null,
init: function()
{
$('#spotlight .controls a').click(function(e) {
// do stuff here to count and move images
// Don't follow the link
e.preventDefault();
// Clear timeout
clearTimeout(spotlight.timeOutSpotlight);
// Some stuff here to calculate next item
// Call next spotlight in 8 seconds
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
});
// Select first item
$('#spotlight .controls a.next:first').trigger('click');
},
animate: function(i)
{
$('#spotlight .controls li:eq(' + (spotlight.i) + ') a.next').trigger('click');
}
}

From the jQuery documentation:
Because of the nature of requestAnimationFrame(), you should never
queue animations using a setInterval or setTimeout loop. In order to
preserve CPU resources, browsers that support requestAnimationFrame
will not update animations when the window/tab is not displayed. If
you continue to queue animations via setInterval or setTimeout while
animation is paused, all of the queued animations will begin playing
when the window/tab regains focus. To avoid this potential problem,
use the callback of your last animation in the loop, or append a
function to the elements .queue() to set the timeout to start the next
animation.

I finally found my answer and it’s not at all what I was expecting.
It seems the culprit is jQuery’s .animate(), which I use to move the images in the slider.
I calculate and move my images positions with this:
$('.spotlight-inner')
.animate(
{ left: scrollToVal },
{duration: 'slow'}
)
;
Now the problem seems to be that in some browsers, after you switch to a new tab and back, jQuery’s .animate() saves up the animations and fires them all at once. So I added a filter to prevent queueing. That solutions comes from CSS-Tricks.com :
$('.spotlight-inner')
.filter(':not(:animated)')
.animate(
{ left: scrollToVal },
{duration: 'slow'}
)
;
The first slide you see when you go back can act a little jumpy but it’s better than the superspeed carousel from before.
Fiddle with the full code here

There is an easier way using the jquery animate queue property:
$(this).animate({
left: '+=100'
}, {duration:500, queue:false});

I don't know if this will help you, but it helped me with my slideshow. What I did was everytime I called an animation that was supposed to happen at a set interval because of the setTimeout, I called clearQueue() which would get rid of any other animations that had been set to happen. then i'd call the animation. That way when you come back to that tab, you don't have all these animations queued up and it goes crazy. at max you'll only have one set up.
So something like this:
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.clearQueue(); // get rid of other instances of the animation
spotlight.animate(spotlight.i);
}, 8000);
It may not work in all cases (depending on timing), but I hope that helps somebody!

You must also think you use clearTimeout.
As you call setTimeout function it returns an ID you can save this ID in a variable like
timeoutID = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
and before setting a new timeout you can call the function like
clearTimeout(timeoutID)

My suspicion is that the browser queues input events like 'click' but only fires them when the tab where the event occurs actually has focus.
Perhaps you should try calling your click callbacks directly instead of using trigger('click').
Something like this:
spotlight: {
i: 0,
timeOutSpotlight: null,
clickFunc: function(element) {
// do stuff here to count and move images
// Clear timeout
clearTimeout(spotlight.timeOutSpotlight);
// Some stuff here to calculate next item
// Call next spotlight in 8 seconds
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
},
init: function()
{
$('#spotlight .controls a').click(function (e) {
// Don't follow the link
e.preventDefault();
spotlight.clickFunc(this);
});
// Select first item
spotlight.clickFunc($('#spotlight .controls a.next:first'));
},
animate: function(i)
{
var element = $('#spotlight .controls li:eq('+spotlight.i+') a.next');
spotlight.clickFunc(element);
}
}

What version of jQuery are you running? Apparently this problem was 'fixed' for version 1.6.3 - they reverted the change that caused this to happen. Discussions here and here.
Though this issue will likely have to be addressed in the future, it seems as though we're off the hook for now.