I am looking to animate this progress bars, but I'm having a different behavior using jQuery animate() method. I want to animate the progress bars one by one with a 0.1s delay. I will need help with choosing the right animation, because now my animation is behaving downwards. I'd like to do it in the simplest way possible.
Here is what I have so far:
$('.vertical-bars .progress-fill span').each(function() {
var percent = $(this).html();
var pTop = 100 - (percent.slice(0, percent.length - 1)) + "%";
$(this).parent().css({
'height': percent,
'top': pTop
});
$(this).parent().animate({
height: "toggle"
}, {
duration: 900,
specialEasing: {
height: "swing"
}
});
});
I have prepared a JSFiddle with my progress bars HERE.
The right behavior is to fill the progress-bars upwards, like in THIS example.
You need to animate both the height and top of your bars, or you need to construct them such that they are pinned to the horizontal axis when you change the height. The second takes a little more thought, but the first, although not as elegant, is straight forward.
To animate top you can't use toggle (as it is animating to 100% and back, not to 0), so you will need to animate both the shrink and grow separately using done to trigger a second animation. Taking the same style as you used above:
$('.vertical-bars .progress-fill span').each(function () {
var percent = $(this).html();
var pTop = 100 - ( percent.slice(0, percent.length - 1) ) + "%";
$(this).parent().css({
'height': percent,
'top': pTop
});
var self=this;
$(this).parent().animate({
height: 0,
top: "100%"
}, {
duration: 900,
specialEasing: {
height: "swing",
top: "swing"
},
done:function(){
$(self).parent().animate({
height: percent,
top: pTop
}, {
duration: 900,
specialEasing: {
height: "swing",
top: "swing"
}
})
}
});
});
Of course you can also achieve the same thing using css animation. If I have time to figure it out I'll post an edit.
I don't know what height: "toggle" does but you basically want to set 0 height and 100% offset from top and then start animation that adjusts both styles.
The 100ms between animations is done simply by using setTimeout and incrementing the timeout.
https://jsfiddle.net/kss1su0b/1/
var elm = $(this).parent();
elm.css({
'top': '100%',
'height': 0
});
setTimeout(function() {
elm.animate({
'height': percent,
'top': pTop
}, {
duration: 900,
specialEasing: {
height: "swing"
},
});
}, animOffset);
animOffset += 100;
The simplest and most performing way to invert the animation direction is to align the bars at the bottom with css:
vertical-bars .progress-fill {
position: absolute;
bottom: 0;
}
Then you don't need to set the top any more with jQuery and set a delay:
$('.vertical-bars .progress-fill').each(function (index) {
var percentage = $(this).find('.percentage').html();
$(this).delay(index * 100).animate(
{
height: percentage
}, {
duration: 900,
done: function () {
$(this).find('span').show("normal");
}
}
);
});
jsfiddle
Related
trying to animate 1 DIV at a certain speed left to right (and back), and also animate it top to bottom (and back) at a different speed (essentially creating a windows-like screensaver effect).
problem is that each animation occurs after each other (obviously) but i'm hung up on trying to combine so that the image will animate diagonally.
coming from CSS animation this is easy, but with that it can't detect responsive window width/height so bounce edges get real wonky.
any ideas? big thanks.
code so far is:
$(document).ready(function() {
updateWindowsize();
$(window).resize(function() {
updateWindowsize();
});
bounceBounce();
});
var imageWidth = '540'
imageHeight = '705'
function updateWindowsize() {
var $window = $(window);
windowHeight = $window.height();
windowWidth = $window.width();
}
function bounceBounce() {
$('.div-1').animate({"left": windowWidth - imageWidth}, 3000, 'linear',
function(){ $(this).animate({left: 0}, 3000, 'linear');
});
$('.div-1').animate({"top": windowHeight - imageHeight}, 6000, 'linear',
function(){ $(this).animate({top: 0}, 6000, 'linear');
});
bounceBounce();
};
Did you try this:
$('.div-1').animate({"left": windowWidth - imageWidth, "top": windowHeight - imageHeight}, 6000, 'linear',
function(){ $(this).animate({left: 0, top: 0}, 6000, 'linear');
});
I was curious on how to set a height or width dynamically based on when a div is animated.
JQUERY
$(document).ready(function() {
var div1dimensions = 50 / 180 +'px';
$("#div1").animate({
width: divdimensions,
height: "100px",
opacity: 1,
}, 1500 );
});
Can I not just create a variable and place it where the width or height is? Or is that only for CSS values such as 100px?
Thank you.
Something that is important is that when using the object form of the .css() method, any numerical values placed there are inherently assumed to be pixel values:
$(document).ready(function() {
var div1dimensions = (50 / 180);
$("#div1").animate({
width: div1dimensions,
height: 100,
opacity: 1,
}, 1500 );
});
Notice the lack of quotation marks. If you go about it this way, you can use a variable very easily:
$(document).ready(function() {
var div1dimensions = (50 / 180),
divHeight = div1dimensions * 1.5;
$("#div1").animate({
width: divdimensions,
height: divHeight,
opacity: 1,
}, 1500 );
});
Or any other variable calculation you wish, this is just an example. Additionally, as-of jQuery 1.4 you can pass in a function for that calculation. The example used in the jQuery .css() documentation modified to reflect your example:
$(document).ready(function() {
var div1dimensions = (50 / 180);
$("#div1").animate({
width: div1dimensions,
height: function(i){
return i * 50;
},
opacity: 1,
}, 1500 );
});
That one can get tricky pretty quickly, and is really only helpful in very specific scenarios, but is handy when needed.
I have 5 divs layered and a object in the foreground I want to move across them. This is using the paralax effect. I have been sucessfully able to move the object using basic .animate in jQuery.
The problem I'm having is getting the background divs to animate properly - or at all. What happens is when I click on my trigger div - the div.cloud1 and div.cloud2 move BEFORE my object does. They also change positions despite my playing with the timing values.
All objects in the divs are absolutely positioned - the divs are relative for being able to use z-index.
Specifically I'm trying to move div.cloud1, div.cloud2, div.ground, div.Mountain all at different speeds so it gives the illusion of 3d.
The object I'm sending across is a different div.
I'm not sure what the problem is.
Here is my JSfiddle: http://jsfiddle.net/U6Mu6/
jQuery(document).ready(function () {
jQuery('#cloud-01').css({
backgroundPosition: '50 -180px'
});
jQuery('#cloud-02').css({
backgroundPosition: '0 -100px'
});
jQuery('#mountains-03').css({
backgroundPosition: '0 50px'
});
jQuery('#trees-04').css({
backgroundPosition: '0 50px'
});
jQuery('#ground').css({
backgroundPosition: 'left bottom'
});
jQuery('#branding').css({
backgroundPosition: 'center 0'
});
jQuery('#content').css({
backgroundPosition: 'center 0'
});
jQuery('#sec-content').css({
backgroundPosition: 'center 0'
});
jQuery('#footer').css({
backgroundPosition: 'center 0'
});
jQuery('#wrapper').css({
overflow: "hidden"
});
jQuery('#klicker').click(function () {
jQuery('#cloud-01').animate({
backgroundPosition: '(-100px -10px)'
}, 200000);
jQuery('#cloud-02').animate({
backgroundPosition: '(-400px 0px)'
}, 20000);
jQuery('#mountains-03').animate({
backgroundPosition: '(-2500px 50px)'
}, 20000);
jQuery('#ground').animate({
backgroundPosition: '(-5000px bottom)'
}, 20000);
startHim();
jQuery("#full-robot").animate({
left: "50%",
marginLeft: "-150px"
}, 2000);
setTimeout("leaveScreen()", 15000);
});
});
var num = 1;
function startHim() {
num++;
jQuery("#sec-content").animate({
top: "-=5px"
}, 150).animate({
top: "+=5px"
}, 150);
jQuery("#content,#branding").animate({
top: "-=" + num + "px"
}, 150).animate({
top: "+=" + num + "px"
}, 150);
if (num < 4) {
setTimeout("startHim()", 300);
} else {
setTimeout("bounceHim()", 300);
}
}
function bounceHim() {
jQuery("#sec-content,#branding").animate({
top: "-=4px"
}, 150).animate({
top: "+=4px"
}, 150);
jQuery("#content").animate({
top: "-=8px"
}, 150).animate({
top: "+=8px"
}, 150);
setTimeout("bounceHim()", 300);
}
function leaveScreen() {
jQuery("#full-robot").animate({
left: "100%",
marginLeft: "0px"
}, 2000);
}
Just FYI - some of the objects in the fiddle are not included on purpose. I just want to get things working first.
I did see a error in JSFIDDLE dealing with implied eval on my setTime expression. But I'm not sure how to fix it. I suppose I could pass the div as function and use .hide instead.
All help is welcome thanks!
EDIT:::
I forgot this:
/**
* v. 1.02
*/
(function($) {
$.extend($.fx.step,{
'background-position': function(fx) {
if (fx.state === 0 && typeof fx.end == 'string') {
var start = $.curCSS(fx.elem,'background-position');
start = toArray(start);
fx.start = [start[0],start[2]];
var end = toArray(fx.end);
fx.end = [end[0],end[2]];
fx.unit = [end[1],end[3]];
}
var nowPosX = [];
nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
function toArray(strg){
strg = strg.replace(/left|top/g,'0px');
strg = strg.replace(/right|bottom/g,'100%');
strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
}
}
});
})(jQuery);// JavaScript Document
I don't know if this is too obvious, but your trying to set the "background-position"attribute of the clouds by using backgroundPosition
You might just change them to
$("#cloud-01").css({'background-position': '50px -180px'})
Notice the background-position instead of backgroundPosition
If you want to stagger the time each cloud takes to move, you need to offset your animation durations, like
$('#cloud-01').animate({
'background-position' : '(-100px -10px)'
}, (1000) ); // 1 second duration
$('#cloud-02').animate({
'background-position' : '(-400px 0px)'
}, (2000) ); // 2 seconds
$('#mountains-03').animate({
'background-position' : '(-2500px 50px)'
}, (2000) ); // 3 seconds
I have got a menu on my homepage and on hover I would like them to enlarge. This is exactly what I have achieved, except there is one flaw:
When I move off before the animation ends, the option stops the animation and subtracts 30 from the width that left off from the previous animation. So it always intersects with the other animation and causes false results.
Example:
I move quickly to menu option 1, it only expands little - let's say by 10px - while I am on it, and as I move off the width decreases by 30px, which is more than the previously moved 10px, which results in a smaller button overall.
I would like to somehow capture how much it has moved during the mouseover animation and only decrease the width in the leaving function by that amount. Or, of course some other easy solution, if there is one...
Here's the code:
$('.menu_option').hover(
function() {
var w = $(this).width()+30+"";
$(this).stop().animate({ width:w}, 150, 'easeOutQuad');
}, function() {
var w = $(this).width()-30+"";
$(this).stop().animate({ width:w}, 150, 'easeOutQuad');
});
What you can do is make another variable which is the origin width then when you put it back go back to the origin:
js:
var o = $('.menu_option').width();
$('.menu_option').hover(function () {
var w = $(this).width() + 30 + "";
$(this).stop().animate({
width: w
}, 150, 'easeOutQuad');
}, function () {
$(this).stop().animate({
width: o
}, 150, 'easeOutQuad');
});
http://jsfiddle.net/Hive7/qBLPa/6/
You need to complete the previous animation before the width is calculated
$('.menu_option').hover(function () {
var $this = $(this).stop(true, true);
var w = $this.width() + 30;
$this.animate({
width: w
}, 150, 'easeOutQuad');
}, function () {
var $this = $(this).stop(true, true);
var w = $this.width() - 30 + "";
$this.animate({
width: w
}, 150, 'easeOutQuad');
});
Demo: Fiddle
I have a list of items & they are holding images, each image is 800w x 600 H. The original div height is 800 W x 300 H. I figured out how to expand the div when it is clicked, but i want to know how to collapse it when you clicked it while it is already expanded. Right now i just expands the div even further
$('.expand').bind('click', function() {
var currHeight = $(this).css('height').replace(/px/,'');
currHeight = currHeight * 1;
var newHeight = currHeight + 500;
$(this).animate({
height: newHeight
},1000);
});
any idea on how to create an if else statement that would say, IF the div is already expanded then collapse on click, or if the div is collapse, then expand to # of px.
You can detect the current height and branch:
$('.expand').bind('click', function() {
var $this = $(this),
height = $this.height();
if (height > 500) {
height -= 500;
}
else {
height += 500;
}
$this.animate({
height: height
},1000);
});
I've done a couple of other things in there. You can use height rather than css('height') to get the value without units, and no need for the * 1 trick. I've also done the $(this) once and reused it, since there are multiple function calls and an allocation involved when you call the $() function. (It doesn't matter here, but it's a good habit to get into provided you're not caching it longer than you mean to [via a closure or such].)
Alternately, you can remember that you've done it another way (using the data feature):
$('.expand').bind('click', function() {
var $this = $(this),
height = $this.height(),
expanded = $this.data('expanded');
if (expanded) {
height -= 500;
}
else {
height += 500;
}
$this.data('expanded', !expanded);
$this.animate({
height: height
},1000);
});
Or combine those to store the original height in case it gets influenced by something else:
$('.expand').bind('click', function() {
var $this = $(this),
height = $this.height(),
prevHeight = $this.data('prevHeight');
if (prevHeight) {
height = prevHeight;
$this.data('prevHeight', undefined);
}
else {
$this.data('prevHeight', height);
height += 500;
}
$this.animate({
height: height
},1000);
});
Take your pick!
I would use CSS to set the height of the div in both original and expanded versions, and then when the div is clicked, toggle a class to change the height:
/* CSS for the height */
.expand {
height: 300px;
}
.expand.expanded {
height: 600px;
}
and then in the click method, just:
$(this).toggleClass("expanded");
A few pointers with jQ:
.click(function(){})
.css({height: "300*1px"}) // Why are you multiplying Anything by ONE?!
And you can use
if($(this).css("height") == "300px") {
Do stuff
} else {
Do other stuff
}
Edit: But other options above are far better.
You can check the .height() at the time of the click event and .animate() the height += or -= accordingly (something .animate() supports), like this:
$('.expand').click(function() {
$(this).animate({
height: $(this).height() > 300 ? "+=500px" : "-=500px"
}, 1000);
});
Or, use .toggle(), like this:
$('.expand').toggle(function() {
$(this).animate({ height: "+=500px" }, 1000);
}, function() {
$(this).animate({ height: "-=500px" }, 1000);
});
Pure Jquery, check the documentation Jquery Animate
$( "#clickme" ).click(function() {
$( "#book" ).animate({
height: "toggle"
}, {
duration: 5000,
specialEasing: {
height: "linear"
},
complete: function() {
//DO YOUR THING AFTER COMPLETE
}
});
});