Fading in a Javascript Object after a certain Time - javascript

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'
});
});

Related

How to animate my element using Anime.JS?

I'm using Articulate Storyline to create some cool javascript animations...
First I need to find and select the element that I'm going to animate...
I'm using jQuery to select elements by finding their CSS class. I can find elements by pretty much any data attribute assigned to them, in this case, it's aria-label. So my selector will look something like this:
$('[aria-label="my_image"]')
I need to take another step though. Storyline converts almost everything you put on a slide into an SVG when it gets published. It wraps the SVG with HTML DIV tag which holds our aria-label. Therefore, I actually want to apply my effects on SVG within the DIV so I select it like so:
$('[aria-label="my_image"] svg')
Now I have my element I can use TweenLite from GreenSock or any JS animation engine to make some animations to it. For instance, the following code will find the "myElement" and pushes it to the right...
Note: "myElement" element is an image on my Storyline stage. and the code executes when a button is clicked.
var item = $('[aria-label="myElement"] svg')
go();
function go() {
TweenLite.to(item, 1, {left:"63px"});
}
Now I want to use Anime.JS Animation Engine instead of TweenLite and I'm confused why it doesn't work? and how to make it work?
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: '#item',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
I don't know how to reference my target? I've tried :
targets: '#item',
targets: '.item',
targets: 'item',
Any Idea is greatly appreciated...
Have you tried '[aria-label="spinner"] svg'?
function go() {
var customBezier = anime({
targets: '[aria-label="spinner"] svg',
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
Looks to me like a CSS selector is what AnimeJS wants.
You should get rid of the apostrophe:
var item = $('[aria-label="spinner"] svg')
go();
function go() {
var customBezier = anime({
targets: item,
translateX: 250,
easing: [.91,-0.54,.29,1.56]
});
}
http://animejs.com/documentation/

JQuery fadeOut callback function is being executed after fadeOut is over

On a click of a button, i'm trying to fadeOut an image, and while it is fading out i'm changing the source of the image. And then i'm using the fadeIn to show the new image. This works fine in Chrome, and firefox. However, in ie10, the image fades out, fades in, and then the new image appears. I can't find a a fix for it. I've tried to prolong the duration of fadeOut, fadeIn. I've tried using setTimeout function. i've tried using promise().done() function. I've tried using Jquery UI's hide/show w/ slide effect, and same issues are appearing. Nothing seems to be working. I'd really appreciate any help. Thanks
me.$el.find('#printable-detail-static-imageRight').fadeOut('fast', function(){
me.$el.find('#printable-detail-static-imageRight').attr('src', me.options.samplePrints[k+i]);
me.disableNext();
});
me.$el.find('#printable-detail-static-imageRight').fadeIn('slow')
I'm pretty sure you need to put the .fadeIn method inside the callback function in order for it to be affected by the callback function. In fact, I'd add another callback function to the .attr method to make sure that it fades back in only after the src has been changed.
Here's a jsFiddle I wrote to illustrate what I mean.
i am on a mac, but does this code works in ie ? jsFiddle
.html
<div id="content">Promises</div>
<button id="click">start animation</button>
.js
$("#click").on("click", function () {
$('#content').fadeOut({
duration: 1000,
// run when the animation is complete
complete: function () {
$("#content").append($("<div>").addClass("fakeimg"));
},
// run when the animation is complete +
//it's promise is resolved
done: function () {
$('#content').fadeIn(1000);
}
});
});
this works:
me.$el.find('#printable-detail-static-imageRight').animate({
opacity:0
}, {
duration: 700,
step: function(now, fx){
if(fx.pos > 0.40 && fx.pos < 0.5){
$(this).attr('src', me.options.samplePrints[k+i]);
me.disableNext();
}
if (fx.pos ==1) {
$(this).animate({
opacity:1
}, 200);
}
}
});

Start playing swf when jquery .animate is done

I have an swf inside a div that is hidden. It is stopped in frame 1 and I want it to start playing when a jquery script is done. Here is my code:
function doFlash() {
$("#first_menu").hide("clip", { direction: "vertical" }, 500, function() {
$('#flash_container').animate({top: 0}, 1500, function(){
getElementById('FlashID').Play()});});
};
But it is not working at all, it do the animation but don't start playing the swf. Thanxs in advance.
UPDATE: The wmode:transparent issue is fixed now, but the swf is still not playing in FF and Chrome. I used swfobject as Fabrício Matté suggested me, but for some reason it is just working in IE. I think that maybe is something about the id of the oject, but i'm not sure. Here's the link to the example: http://molcajete.com.mx/natura/videos_fito/ Thanks for the help!
This API : http://api.jquery.com/stop/ or .is('animate') might help to check if animation is done.
Also if you want, you can set a callback to be called when the animation is done: http://docs.jquery.com/Effects/animate
Sample code
if( $("#fooDov").is(":animated") ){
alert("HULK!");
}
your code
function doFlash() {
$("#first_menu").hide("clip", { direction: "vertical" }, 500, function() {
$('#flash_container').animate({top: 0}, 1500, function(){
if( $(this).is(":animated") )
getElementById('FlashID').Play()});});
};
It seems that I only needed to write the 'name' at the object.

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');
}
});

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'
});

Categories