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
Related
I'm using Velocity.js for animation.
I'm first translating and rotating an object. After the animation is complete I need to rotate the object by an additional 360 degrees.
The problem is that during the second animation the rotation axis is off. Instead of rotating around the center the object rotates around its original point.
$.Velocity( obj, "stop" );
$.Velocity( obj,
{translateX: pos, rotateZ: rotation + 'deg'},
{duration: 1000, complete: function() {
$.Velocity( obj, {rotateZ: "360deg"}, {duration: 1000} ); }
});
What may be the problem?
UPDATE
Codepen that demonstrates the issue: http://codepen.io/anon/pen/MYZaaj
This is because Velocity currently does not parse initial transform values. From the docs:
Note that Velocity's performance optimizations have the byproduct of ignoring outside changes to transform values (including initial values as defined in your stylesheets, but this is remedied via Forcefeeding). (You can manually set transform values within Velocity by using the Hook function.)
This will be addressed in future version but currently follow the advice below to use forcefeeding to fix it.
Sorry, I don't have enough points to comment, but hook (the other answer is right). Just add $.Velocity.hook(circle, "translateY", "0");
var circle = $(".circle");
circle.velocity({
translateX: 500,
rotateZ: 360
}, {
duration: 2500
}).delay(500).velocity({
rotateZ: -360 * 2,
translateY: 200
}, {
duration: 2500
});
$.Velocity.hook(circle, "translateY", "0");
circle.delay(500)
.velocity({
translateY: 0,
rotateZ: -360 * 5
}, {
duration: 2500
});
.circle {
background: url("https://dl.dropboxusercontent.com/u/16997159/square.png");
width: 128px;
height: 128px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<div class="circle">
</div>
I have a number of divs positioned absolutely on a background image.
On the page will also be some buttons. When those are clicked different variables will trigger, shrinking and growing these divs.
Here is the javascript I'm currently using...
$(document).ready(function() {
var title = 1;
$(".button1").click(function() {
title = 1;
});
$(".button2").click(function() {
title = 2;
});
$(document).click(function(e) {
console.log(title);
if (title==1){
$('.london').animate({ backgroundColor:'green', width:'50', height:'50' }, 300);
} else if (title==2){
$('.london').animate({ backgroundColor:'red', width:'40', height:'40' }, 300);
}
});
});
As they are absolutely positioned they are scaled from the corner they are positioned with.
see an example here.
What I need to do is shrink and grow these divs from their center point. The only solutions I've seen seem overly complicated.
I guess I could add a negative margin of half the divs width in the jQuery to counteract this? I'll try that if there are no better solutions
Thanks for any help.
bboybeatle, your "negative margin of half the divs width" idea is spot on, and not at all difficult to implement. Just include the required marginTop and marginLeft settings in the two animations.
$(function() {
var cssMap1a = {
backgroundColor: 'green'
};
var cssMap1b = {
width: 50,
height: 50,
marginTop: -10,
marginLeft: -10
};
var cssMap2a = {
backgroundColor: 'red'
};
var cssMap2b = {
width: 30,
height: 30,
marginTop: 0,
marginLeft: 0
};
$(".button1").click(function () {
$('.london').css(cssMap1a).animate(cssMap1b, 300);
});
$(".button2").click(function () {
$('.london').css(cssMap2a).animate(cssMap2b, 300);
});
});
And here's a fiddle. Fiddles are not difficult to set up. Hopefully this will help you next time you need to ask a question here.
As you will see :
"London" and the buttons are moved to a better position for demo purposes
The colour changes are separated out as separate css maps. They didn't work in the fiddle when included in the animation maps. jQuery needs a plugin to animate colours.
Thanks very much for that #Roamer-1888, I actually used some variables to make it slightly easier to apply the margin. I will remember that technique of putting multiple css properties in a variable..
Heres a snippet of my code I ended up using...
londonMargin = london/2 - london;
$('.london').animate({ width:london, height:london, marginLeft:londonMargin, marginBottom:londonMargin }, 300);
Just for fun I put together a little FIDDLE that has a function to which you pass an element name, the x and y coordinates of the center, and it will position the element in the larger element.
JS
var myelement = $('.boxdiv');
var myelement2 = $('.boxdiv2');
putmycenter( myelement, 90, 90 );
putmycenter( myelement2, 160, 280 );
function putmycenter (element, x, y)
{
var boxdivxcentre = element.width()/2;
var boxdivycentre = element.height()/2;
var boxdivposx = (x - boxdivxcentre);
var boxdivposy = (y - boxdivycentre);
element.css({
"top" : boxdivposy + 'px',
"left" : boxdivposx + 'px'
});
}
i am using one plugin for slider. That slider contains H & W is mentioned by pixel. I want that in %
$("#section4").awShowcase(
{
content_width: 1000,
content_height: 300,
}
});
They are mentioned by like this. how to change this by % - Percentage.
I want that for responsive model
Try to use:
$("#section4").awShowcase({
content_width: '50%',
content_height: '50%',
//} // Remove this
});
Also, you're having redundant } in your code.
$("#section4").awShowcase(
{
content_width: 100%,
content_height: 30%,
}
});
Is this what you looking for?
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.
Hi I need to scale and animate div left same time.
Something like this.
$('#div').effect('scale'{percent:200},
'animate',{left:200});
Thanks.
This is the solution I found.
$('#div').effect('scale'{percent:200},1000);
$('#div').animate({left:100,top:100},1000);
$('#div').fadeTo(1100,0));
$('#div').animate({
left: 200,
height: ($(this).height()*2),
width: ($(this).width()*2)
}, 1000);