Truely Simultaneous Animation of Multiple Elements Jquery - javascript

I'm currently trying to achieve an animation with multiply elements to achieve a focused viewport effect.
The issue I am having is that in browsers such as Safari the bottom element does not seems to be animated correctly and you see a 1px line from time to time. You also see this in from if you keep refreshing the browser.
I assume this is because the animations are not firing all at the same time..
The following is the animation code:
$("#top").animate({
height: '150px'
}, {
duration: 2000,
queue: false
});
$("#right").animate({
top: '150px',
left: '200px',
height: '50px'
}, {
duration: 2000,
queue: false
});
$("#left").animate({
top: '150px',
width: '150px',
height: '50px'
}, {
duration: 2000,
queue: false
});
$("#bottom").animate({
top: '200px'
}, {
duration: 2000,
queue: false
});
I have provide a full working fiddle of what I have so far:
http://jsfiddle.net/cjcartlidge/AKERR/
Any tips would be grateful. Note: The reason i'm doing a 4 div solutions is due to needing to support IE-8 and IE-8 not support transparent borders.
UPDATE:
I've also tried the animation in greensock.js and get the same result with the following code:
var tl = new TimelineLite();
tl.to($('#top'), 1, {height: hotspot.y + 'px'}, 0);
tl.to($('#bottom'), 1, {top: (hotspot.y + hotspot.height) + 'px'}, 0);
tl.to($('#right'), 1, { top: hotspot.y + 'px', left: (hotspot.x + hotspot.width) + 'px', height: hotspot.height + 'px'}, 0);
tl.to($('#left'), 1, { top: hotspot.y + 'px', width: hotspot.x + 'px', height: hotspot.height + 'px', }, 0);

The extra pixel is probably due to rounding error.
Two options come to mind:
Use native CSS animation and hope that browsers handle rounding more gracefully than JS libraries.
Make the four edge pieces overlap rather than merely touch, so you can't possibly have a gap. You'd have to stick them in their own container and apply opacity to the shared parent, of course.

Related

JQuery .animate(); not working with fixed height

I've worked with this many times and have had no problem. Animating the height and/or width of a DIV either by width/height: 'toggle' or replacing 'toggle' with specified width/height.
setTimeout( function(){
$('.input-group .Advanced').animate({
height: 'toggle'
}, {
duration: 500,
});
} , 500);
height: 'toggle' - Demo on JSFiddle
height: '400px' - Demo on JSFiddle
The code snippet works perfectly fine however I need this to be set to a specific height and replacing my 'toggle' to a fixed height such as '400px' does absolutely nothing...
$('.form-control' ).click(function(e) {
$(this).addClass('InputFreezeFocus');
$(this).animate({
width: '400px'
}, {
direction: 'left',
duration: 500,
});
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '400px',
opacity: 'toggle'
}, {
duration: 500,
});
} , 500);
});
The .animate() method does not make hidden elements visible as part of the effect so you have to toggle the opacity.
Link to fiddle
Your given height is not working because you have set a display:none to your .Advanced class. When you use jquery inbuilt toggle string it will take care of that and make your hidden element in view.But, when you define your own height you also have to display that element in view otherwise animation will work but not display. You can refer Jquery animate() reference .It's written there
Note: Unlike shorthand animation methods such as .slideDown() and .fadeIn(), the .animate() method does not make hidden elements visible as part of the effect. For example, given $( "someElement" ).hide().animate({height: "20px"}, 500), the animation will run, but the element will remain hidden.
You can do this to animate your class
setTimeout( function(){
$('.input-group .Advanced').animate({
height: '500px',
opacity:'show'
}, {
duration: 500
});
} , 500);
This will get your hidden element in view.Demo of your code

Velocity.js clearing default values after animation

I have elements on a page that I want to animate in to view, but after they've animated in, I want to defer further animation on them to CSS (by changing classes)... I am finding that Velocity leaves all my animated properties in the style= tag and makes CSS transitions impossible.
I have a solution below, but resetting the CSS on complete seems iffy, I was wondering if there's a better way to do it?
// first use CSS to hide the element and squish it
$el.css({
width: 0,
left: "-10px",
opacity: 0,
marginRight: 0,
transition: "none"
})
// now animate the width and margin (do this first
// so there's a little gap between existing elements
// before we fade in new element.
.velocity({
width: width,
marginRight: margin
}, {
queue: false,
duration: 230
})
// then fade and move in the new element,
// but this is the iffy bit when it completes
// I have to unset all the styles I've animated?
.velocity({
left: 0,
opacity: 1
}, {
queue: false,
duration: 100,
delay: 130,
complete: function(els) {
$(els).css({
width: "",
left: "",
opacity: "",
marginRight: "",
transition: ""
});
}
});
Typically, you want animation engines to leave styles inline; otherwise final values will pop as they get overwritten by stylesheets upon removal.
You can also do $(els).attr("style", ""); to just clear all styles.

Working with JQuery animate and "this" selector

I'm working on what I thought would be a simple chunk of code, trying to dynamically (using 'this') animate div blocks to scale (zoom) to the size of the parent container (section tag) on click.
My HTML:
<section>
<div id="project"></div><div id="project"></div><div id="project"></div>
<div id="project"></div><div id="project"></div><div id="project"></div>
</section>
My JavaScript:
$("#project").click(function() {
$(this).animate({
opacity: 0.75,
width: 100%,
height: 100%
}, 5000, function() {
});
});
Both Jquery and Jquery UI are linked correctly from Google Libraries (so says my console), my console also tells me that there is a syntax error with an unexpected ",", however I am taking this syntax straight from JqueryUI.com. Any help is appreciated!
Additionally, I want to be able to dynamically select all other divs except the currently clicked div and remove them from the DOM (using display:none), just so it looks cleaner, but I don't know how to go about 'selecting' them in my code...
Thanks all! :)
you are missing quotes around 100% so your code will be correct like this
$("#project").click(function() {
$(this).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {
});
and please use unique IDs
Edit:
for using classes you can use something like that
$(".project").click(function() {
$(".project").css({'display':'none'});
$(this).css({'display':'block'});
$(this).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {
});
I want to be able to dynamically select all other divs except the currently clicked div and remove them from the DOM (using display:none), just so it looks cleaner, but I don't know how to go about 'selecting' them in my code...
var $project = $(".project");
$project.click(function() {
var thisDiv = this;
$project.each(function(index, elem) {
if (elem!==thisDiv) $(elem).css('display', 'none');
});
$(thisDiv).animate({
opacity: 0.75,
width: "100%",
height: "100%"
}, 5000, function() {});
});

How do I reset the values in javascript without using .animate, related with jquery

I'm changing this div's (#logo)attributes like this
$('#logo').stop().animate({
left: 150,
height: 78,
marginTop: 45
}
After 2 seconds after animation is finished, I make it disappear with .hide('slow'), now while it is hidden I wan't to change it's attributes the same left, height and marginTop to old default ones without animation, because when I do through animate it appears. I mean becomes display:block. I want to make this hidden and then fideIn.
You can use .css in a callback which runs once the animation is complete:
$('#logo').stop().animate({
left: 150,
height: 78,
marginTop: 45
}, function() {
$(this).css({
left: 150, //Change these to whatever they were before the call to animate
height: 78,
marginTop: 45
}).fadeIn();
});
Just use the jQuery css function to set the properties back to their original values.
$('#logo').stop().animate({
left: 150,
height: 78,
marginTop: 45
}).hide('slow', function() {
$(this).css({
left: 0,
height: 50,
marginTop: 10
}).fadeIn();
});
JSFiddle Example

fadeOut() and slideUp() at the same time?

I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.
How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.
Has anyone done this?
You can do something like this, this is a full toggle version:
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');
Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 400ms' };
elem.css(fade).slideUp();
};
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.
The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});
It's possible to do this with the slideUp and fadeOut methods themselves like so:
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});
I had a similar problem and fixed it like this.
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away
Throwing one more refinement in there based on #CodeKoalas. It accounts for vertical margin and padding but not horizontal.
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});

Categories