smooth button grow and button shrink animation on hover - javascript

I am trying to make a fairly simple animation; on mouse over, the button will animate to be bigger. When not hovering, it will return to it's original size. However, whenever when I try this sample code, it warps the button to odd sizes
$('.btn').hover(function() {
$(this).removeClass('btn-primary').addClass('btn-warning');
$(this).stop().animate({
'height': $(this).height() * 2,
'width': $(this).width() * 1.3
}, 300);
}, function() {
$(this).removeClass('btn-warning').addClass('btn-primary');
$(this).stop().animate({
height: $(this).height(),
width: $(this).width()
}, 300);
});
http://jsfiddle.net/RBLqY/1/
how could this problem be solved?

I'm not entirely sure why your code is failing, seems like you have some sort of calculation error when returning to the original size. After fiddling around a bit I found this solution. By animating the padding instead of the height and width you don't have to worry about the height width ratio when it comes to resizing the link.
$('.btn').hover(function() {
$(this).removeClass('btn-primary').addClass('btn-warning');
$(this).stop().animate({
padding: '12px'
}, 300);
}, function() {
$(this).removeClass('btn-warning').addClass('btn-primary');
$(this).stop().animate({
padding: '7px'
}, 300);
});
jsfiddle
Hope this helps.

Related

increase height of div on button click, and decrease it when I click same button again

I have a div with height:0px and I want it to increase height to 300px when I click on a button.
When I click on the button again, I want it to get height of 0px again.
CSS
nav{
height:0px;
overflow:hidden;
opacity:0;
}
JS
$("#hamburger").click(function(){
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
},function(){
$('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');
});
If I only use:
$("#hamburger").click(function(){
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
});
the animation works. as soon as I add the other line, it doesn't. I also tried using the toggle() function, but the result was that as soon as I load my page, the second part of the toggle function (which is height:0, opacity:0) loaded by itself.
here is a link to my website
Any ideas? Thanks
EDIT
I forgot to say that i am making my website responsive, and that this js code only concerns the mobile version, so to see the result, you should set your browser width to 480px or less
You're trying to call both functions at the same time. One function wants to increase the height of the div, and the other wants to decrease the height of the div.
Try something like this:
$("#hamburger").click(function(){
var maxHeight = 300;
if(+$('nav').height() < maxHeight) {
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
} else if (+$('nav').height() === maxHeight) {
$('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');
}
});
To make it even shorter, you could do:
$("#hamburger").click(function(){
var maxHeight = 300,
nav = $('nav');
nav.stop().animate({ height: +nav.height() < maxHeight ? 300 : 0, opacity: +nav.css('opacity') === 1 ? 0 : 1 }, 'slow');
});
By the way, the random + signs typecast any strings into numbers, just in case.

animate width of rectangle from center in raphael.js

I have a question about the .animate() Api in Raphael.js
There is a rectangle which I would like animate the width and height.
r.animate({ width: 50, height: 50 }, 1000, "bounce");
But I want to expand it from the center of that rectangle, not the left-top. Does anyone of you know how to do it?
FIDDLE
There is a better way to do this without calculation. If you know how much bigger you want to make your object, then you should animate the scaling.
Here is the DEMO
r.click(function() { r.animate({ transform:'s2' }, 500); });
Note that transform:'s2' means scale it 2x. Hope this helped ;)
EDIT if you want to have this animation works conterminously, just write transform:'...s2' instead.
You can use x and y to move the retangle and simulate it growing from center.
r.click(function() { r.animate({ width: 100, height: 100, x: 75, y:75 }, 500); });
Here is a FIDDLE

jQuery: animate to height of div

I have this function:
function fixedFeeSize(i){
var num1 = $('#num' + i);
if (num1.hasClass("extended")) {
num1.stop(true, true).animate({height: '59px'},500);
num1.removeClass("extended");
}else{
var height = 0;
num1.animate({height: '360px'},500);
num1.addClass("extended");
}
return null;
}
Which expands / contracts a div, however I am struggling to get it to expand to the height of the div as each div (there will be 10+) is going to be different heights.
I tried num1.animate({height: 'auto'},500); which has not worked.
Is this the effect you're after?
jQuery(".menu a").mouseenter(function(){
jQuery(this).stop().animate({
height: 200, opacity: 0.5
}, 1000, "linear");
});
jQuery(".menu a").mouseleave(function(){
jQuery(this).stop().animate({
height: 18, opacity: 1
}, 1000, "linear");
});
Here's a jsfiddle:
http://jsfiddle.net/kKAZx/1/
For further reading, take a look at the full documentation of the .animate function: http://api.jquery.com/animate/
You can combine effects to make all kinds of fantastic, standard-compliant effects.

jQuery animation perform poorly all over. How can I make it smoother?

I tried to emulate the effect in the slider on this site: http://metalabdesign.com/
Here's the animation code:
$('.tagLink').click(function () {
$('html').css('overflow', 'hidden');
$('#tagBoxOverlay').show().stop(1).fadeTo(200, .9)
$('#tagBox').show().stop(1).animate({
marginTop: '-37.5%',
marginLeft: '-37.5%',
height: '75%',
width: '75%',
opacity: 1
}, {
duration: 200,
specialEasing: {
opacity: 'linear',
width: 'linear',
height: 'linear',
marginLeft: 'linear',
marginTop: 'linear'
},
complete: function () {
$(tagBoxContents).fadeTo(200, 1);
$('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1);
$(window).resize(function () {
$('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1)
});
}
});
tagBoxOverflow and tagBox start out 100% width & height. Overlay fades in, and the box both fades in and shrinks.
Here's a site where you can see it live: http://hashtraffic.com/
Hit "begin" then click "hipsters" and it will do the animation.
Why is it so slow? Here's a link to the RAW JS:
http://hashtraffic.com/js/HashTraffic.js
I'm so lost here. I understand I'm asking a lot of the browser, but metalabs does it just fine! Would it be smoother if I used CSS animations with js fallback?
Definately smoother to use css3 transitions (but IE does not reward us for this).
But I think a major problem is your margins.
I would make it position: absolute. and animate top right bottom and left.
With what your doing,the browser is forced to reflow the entire page, but if you make the position absolute, resizing does not effect the containing element or any of its parents.

Last Div Flickering During jQuery Hover Animation

Here's my code: http://jsfiddle.net/ZspZT/
As you can see from the example, the fourth div block is flickering pretty badly, particularly on the hover-over effect, but also occasionally with the other divs as well.
Thanks in advance!
It appears that the easing function built into .animate is causing your percentage widths to add up to greater than 100%, causing the last sub-DIV to disappear. There are a few ways to solve this.
When I replace your percentage widths with fixed numerical widths, the problem vanishes. I used this in the code below (and your code had a LOT of redundancy to reduce):
$('document').ready(function() {
var speed = 450;
$('.four-ways-slide').hover(function() {
$(this).stop().animate({
width: 425
}, speed).siblings().stop().animate({
width: 25
}, speed);
}, function() {
$(this).siblings().andSelf().stop().animate({
width: 125
}, speed);
});
});
http://jsfiddle.net/mblase75/ZspZT/10/
Another possibility is to use percent widths that add up to 99% instead of 100%, and set a background color on the container DIV to hide the gap. Adding linear easing to the .animate method helps keep the total width from exceeding 100%:
$('document').ready(function() {
var speed = 450;
$('.four-ways-slide').hover(function() {
$(this).stop().animate({
width: '75%'
}, speed, 'linear').siblings().stop().animate({
width: '8%'
}, speed, 'linear');
}, function() {
$(this).siblings().andSelf().stop().animate({
width: '24.5%'
}, speed, 'linear');
});
});
#four-ways-slide-4,#four-ways-slider{background:#999999;}
http://jsfiddle.net/mblase75/ZspZT/9/
try using 'mouseenter' and 'mouseleave' rather than 'hover'. also you should assign variables rather than repeating divs
var one = $('#four-ways-slide-1');
var two = $('#four-ways-slide-2');
var three = $('#four-ways-slide-3');
var four = $('#four-ways-slide-4');
var all = $('.four-ways-slide');
thisIn = function(){
all.animate({width:'8%'},{duration: 450,queue:false});
};
thisOut = function(){
all.animate({width:'25%'},{duration: 450,queue:false});
};
one.mouseenter(function(){
thisIn();
$(this).animate({width:'76%'},{duration: 450,queue:false});
one.mouseleave(function(){
thisOut();
$(this).animate({width:'25%'},{duration: 450,queue:false});
});
});

Categories

Resources