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 UI Slide - Move content during animation

I'm building a website which relies on jQuery effects and I have a problem with the jQuery Slide effect.
I'm using that through a toggle function for the moment, but that will change in a later stage.
The fact is that I'm hinding an element when a certain action is executed. When you use the function slide the content beneath those elements moves when the animation is completed to take up the free space which was created with the effect.
The problem is that the content is only moved as soon as the animation is completed. Is there any way to move the content when the animation is still running. With other words, I want to move the content together with the animation, but I don't want to call the slide function on my element that should move with it.
I've created a JSFiddle to demonstrate the problem: http://jsfiddle.net/6Lg9vL8m/6/
Edit: Question update and fiddle
Here's an update to the question, and please see my original updated fiddle.
When you execute the slide effect in jQuery UI, see the bottom example on my fiddle, the box is moved up, and is somewhere placed behind an invisible screen (tough to explain).
With the animate function, see the top example in my fiddle, the area is shrinked, and that's something which I want to avoid. I want to achieve the effect such as 'Slide' does, but the content under the box must move up immediately with the animation, and not after the animation has been completed.
Edit: Reworked the correct answer in a plugin.
Thanks to the answers I've received here, I found the correct code, modified a bit, and created a plugin from it which I'll place here.
The plugin is called 'Curtain' and can be described as rising the requested element as a curtain and thus move it out of the way.
Here's the source code:
(function($) {
$.fn.curtain = function(options, callback) {
var settings = $.extend( {}, $.fn.curtain.defaults, options);
var tabContentsHeight = $(this).height();
$(this).animate({height:0}, settings.duration);
$(this).children().animate({'margin-top':'-' + tabContentsHeight + 'px'}, settings.duration, function() {
$(this).css({"margin-top":0});
if ($.isFunction(callback)) {
callback(this);
}
});
return this; // Allows chaining.
};
$.fn.curtain.defaults = {
duration: 250
};
}(jQuery));
The plugin can be called like this:
element.curtain({ duration: 250 }, function() {
// Callback function goes here.
});
If someone has remarks or a better way to solve this problem, please share it in the comments.

You can do it by using the animate function like this:
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
});
Demo
Updated code to create a "curtain raising" like animation:-
$('#square').on('mousedown', function(e) {
$(this).animate({height:-200},2500);
$(this).children().animate({"margin-top":"-400px"},2500, function() {
$(this).css({"margin-top":0})
});
});
CSS:
`#square{
overflow:hidden;
}`
Demo 2

This is the effect you wanted?
$('#square').on('click', function(e) {
$(this).animate({height :0},2500 );
});

jQuery animate() producing wild results

I'm pretty new to jQuery and I've been fooling around with its animate() but I've run into two problems. My code below is basically supposed to expand the characterwindow when the mouse is hovering over it, changing the text inside once it's expanded. Then characterwindow should retract back to it's original size when the mouse goes off the now larger version of it, changing the text as it starts to retract.
My problem is that this is just generally screwy as hell. If you just zoom your mouse in and out a few times it constantly expands and retracts for a bit without you doing anything, and the text flickers when you go in and out and doesn't even disappear before the retraction like it should.
I tried using the callback parameter for the mouseover, but sometimes the text would show up before the animation actually finished.
Is this a limitation of jQuery, JavaScript, my server, my client, or what? If there's a better/more efficient way to implement this I'd be grateful if you showed it.
<html>
<body>
<div id="characterwindow" style="width:80px;height:23px;border-radius:15px;">
<div id="characterwindowgraphic" style="border-radius:15px;background-color:#1C1C1C;height:23px;width:80px;">
<center><p1 id="characterwindowtext" style="color:white;">Character</p1></center>
</div></div>
<script>
$("#characterwindow").mouseover(function() {
setTimeout(function(){$("#characterwindowtext").html("Character<br><br>Name<br>Details");},500);
$("#characterwindow").css({"width":"300px","height":"250px"});
$("#characterwindowgraphic").animate({
width:'300px',
height:'250px'
},500);
});
$("#characterwindow").mouseleave(function() {
$("#characterwindowtext").text("Character");
$("#characterwindow").css({"width":"80px","height":"23px"});
$("#characterwindowgraphic").animate({
width:'80px',
height:'23px'
},500);
});
</script>
</body>
</html>

Your animation are getting queued. So it will not start another animation before the first one is done.
To stop that you can use stop() before the animation like that :
$("#characterwindowgraphic").stop().animate({
width:'300px',
height:'250px'
},500);
it will clear the queue.
Or you can call your animate like that :
$("#characterwindowgraphic").stop().animate({
width:'300px',
height:'250px'
},{duration : 500, queue : false});
Also as winterblood said in the comments, use mouseleave and mouseenter.
Here's a fiddle : http://jsfiddle.net/U6S3S/
EDIT : Also, instead of using a timeout for the html, use animate callback function. If you take the first method, it will be like that :
$("#characterwindowgraphic").stop().animate({
width:'300px',
height:'250px'
},500, function(){
$("#characterwindowtext").html("Character<br><br>Name<br>Details")
});
And if you choose the second method, it will be like that :
$("#characterwindowgraphic").stop().animate({
width:'300px',
height:'250px'
},{
duration : 500,
queue : false,
complete : function(){
$("#characterwindowtext").html("Character<br><br>Name<br>Details")
}
});

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.

Mootools - FX.Scroll won't stop when another event is fired

I don't have a very good understanding of Javascript so appologies before we start.
I have successfully used Mootools 1.1 to scroll to elements onclick events. I used FX.Scroll as the example here http://demos111.mootools.net/Fx.Scroll and basicly ripped off the demo code.
Note: If you click on one link and then another quickly it immediately stops moving to the first element and scrolls to the second.
I am now trying to use Mootools 1.3 to use the fade efects for a gallery and have used More Builder to get FX.Scroll. It is working BUT when I click on one link and then another straight away, it just continues with the first scroll.
It appears that event.stop is not working.
See example http://www.mytimephotography.co.uk < works
http://www.mytimephotography.co.uk/test < broken
I am using code:
window.addEvent('domready', function () {
var scroll = new Fx.Scroll('scrollcontainer', {
wait: false,
duration: 2000,
offset: {'x': 0, 'y': 0},
transition: Fx.Transitions.Quad.easeInOut
})
$('link1').addEvent ('click', function(event){
event = new Event(event).stop();
scroll.toElement('c1');
})
//etc
})
Please view any other source code on the site.

Use the "link" property of the Fx options object. The default is set to "ignore", which is why the original animation keeps running. Instead, use "chain" if you want it to run after the current animation, or "cancel" if you want it to interrupt the currently running animation.
Alternately, use a faster animation—two seconds is really long! :)
var scroll = new Fx.Scroll('scrollcontainer', {
wait: false,
duration: 2000,
offset: {'x': 0, 'y': 0},
transition: Fx.Transitions.Quad.easeInOut,
link: 'cancel'
});