jQuery: animate dynamic elements using CSS? - javascript

I'm trying to animate the elements on my page using jquery and CSS.
The elements are created dynamically thus using jquery.
The issue that i have is that the elements do not animate properly at all. they are actually blinking and go and back/forth and then animating which is not wanted.
This is a working fiddle to explain the issue better:
https://jsfiddle.net/npvsrkcy/12/
This is the sort of animation I'm trying to achieve:
This is my entire jquery code:
$.each($('.images '), function(i, el){
$(el).css({'opacity':0});
setTimeout(function(){
$(el).animate({
'-webkit-animation-delay': i+'s',
'animation-delay': i+'s',
'opacity':1.0
}, 450);
},500 + ( i * 500 ));
//add delay 3s
i+1000;
});
Could someone please advise on this issue?

This should be a good starting point for the effect you're looking for.
I moved the animation into a class. There's no need to specify css animation delay. Applying the class within the loop and timeout is all we need.
$.each($('.images '), function(i, el){
setTimeout(function(){
$(el).addClass('animate');
},500 + ( i * 500 ));
//add delay 3s
i+1000;
});
https://jsfiddle.net/8kpzwtoz/

Related

How to fade in images using jQuery?

first question.
Basically, I’ve made an array of images and managed to loop it through randomly in order to change the background. It works fine. At set intervals and everything. But the transition is too sudden/jarring.
How can I make it fade in and out slowly please? Thats the whole code relating to that, there is even a button to trigger the change rather than wait. I’d like to make that fade in too! thank you.
var backs= [ "bike-1505039_1280.jpg",
"bananas-698608_1280.jpg",
"camera-813814_1280.jpg",
"chevrons-937583_1280.jpg",
"music-1283877_1280.jpg",
"pattern-26442_1280.png",
"people-2587310_1280.jpg",
"puppy-1903313_1280.jpg",
"road-166543_1280.jpg",
"stone-1664918_1280.jpg",
"street-1209403_1280.jpg",
"technology-2643270_1280.jpg"
];
setInterval(function() {
$("BODY").css("background-image", "url(" + backs[Math.floor(Math.random() * backs.length)] + ")");
}, 10000);
$("#backChange").on('click', function(event) {
$("BODY").css("background-image", "url(" + backs[Math.floor(Math.random() * backs.length)] + ")");
});
Since you're using the image as background for the body, I suggest to use CSS3 for the background property:
Please take a look at this post: CSS3 Fade Effect
use animate property to fade in
$('background-image').animate({ opacity: 1 }, { duration: 3000 });

JavaScript/jQuery: Animated Cursor/Light Effect

Recently, I found an SVG with an animated cursor element (like the kind of cursor you see when you're typing text on a screen, like I am now). The JavaScript behind this basically switches the visibility of the target element between on and off. The "cursor" element was the only part of the SVG file that the JavaScript affected. I've found that it can target HTML document objects, too.
Here's the original JavaScript, with id="cursor" (#cursor) marking the target element:
var visible = true;
setInterval(function () {
document.querySelector('#cursor').style.opacity = visible ? 0 : 1;
visible = !visible;
}, 550);
What I want to do is alter this code to make it fade in and out. The resulting effect would be like this:
Fade in quickly (250 ms)
Stay visible for less than half a second (500 ms)
Fade out (250 ms)
Repeat 1.~3.
In other words, steps 1 through 3 would all take place in one second, every second.
The question I have about this is: how do I do this in either JavaScript or jQuery?
(P.S.: is there a jQuery equivalent to the above code?)
Using jQuery, you could do the following
setInterval(function () {
$("#cursor").fadeIn(500, function(){
$(this).fadeOut(500);
});
}, 1000);
Using an interval like you mentioned to start the fade in (utilizing jQuery functions). Passing a callback to fade back out. You can mess with the timing to fit your feel

Run two functions in the exact same time

I want to slideUp() a div, and when its sliding up, I want to move it down by animate() - in the exact same time .
what I have done so far :
ln = jQuery("Selector");
ln.slideUp(1500, function() {
ln.animate({top: '150px'}, 'slow');
var Html = jQuery('#last' + id1).html() + jQuery('#last' + id2).html();
ln.html(Html);
});
But it slides up first, and then moves down 150px.
I want to call these two functions (slideUp and animate ) in the exact same time, I want to know is it possible or not?
Or does my problem have an easier way to solve ?
P.S : I think this kind of questions has been asked before, like this, but Its not my answer if you read it completely.
You can do this by using .animate() for both operations and just specifying both changes with properties that you pass to animate. The slideup can be done by specifying a final height of 0 for animate. Using this single animation, jQuery will run both changes together as part of the same animation sequence.
ln.animate({top: '150px', height: 0}, 'slow');
Working demo: http://jsfiddle.net/jfriend00/kKsa4/

Jquery content filter fading effect

I wrote a little jquery content filter:
jsfiddle.
If I switch between "gfx" and "coding" for example I get this ugly height reseizing effect on the red parent div.
My goal is fading the little divs out then in, at the same place. Without any resizing and without using a fixed height. (Number of items can differ later)
Any hints how I can achieve this?
var filter = $(this).attr('data-filter');
$('#filter_container .filteritem:not(' + filter + ')').fadeOut('slow', function () {
$('#filter_container ' + filter + '').fadeIn('fast');
});
For details and working example see the jsfiddle.
http://jsfiddle.net/k6BPs/8/
The fadeOut() callback is apparently called for each element. See here. That way it will be triggered right away preventing a nice fadeIn() effect after the fadeOut().
You can overcome this problem by using the .promise() and .done(function(){}) methods though.

How do I stop a bouncy JQuery animation?

In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle
It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});
You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
​
DEMO
Hope this helps
Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/
I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover
The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent

Categories

Resources