Response title
This is preview!
Integrating the path/bezier plug-in
in Using jQuery Plugins
•
12 years ago
I thought I had posted this but I can't find it.
I'm trying to accomplish four things upon clicking:
1. hide a div
2. show a div
3. initiate an animation sequence
4. replace a graphic
This all works fine. Now, I'm trying to replace the animation that I have with animation based on an arc so I'm using the bezier/path plugin.
I was told my variables had to be declared outside the function which contains the animation action but I've had no luck putting those two lines of code into what I have.
Here is the full script:
$(document).ready(function(){
var arc_params = {
center: [278,120], //(cooridinates of center of circle)
radius: 186, //half the size
start: -90, //north is 0, measured clockwise
end: 90, //north is 0, measured clockwise
dir: -1 //only required if direction is not obvious or you want to change it
};
$('#portfolio').fadeTo(500,0.25);
$("#account").animate({path : new $.path.arc(arc_params)},1000);
$('#account').animate({width:"10.1875em",height:"11.1875em",duration:'medium'});
$('#next2btn').live('click', function(){
$(this).attr('id','next3btn');// this is where the new id is created
$('#content').fadeTo(300, 0.0, function() {
$('#content2').show(300, function() {
$('#account').fadeTo(500,1.0)
.animate({marginLeft:"220px", width:"2em",'height' :"2em",duration:'medium'})
.animate({
marginLeft:"400px",
marginTop:"35px",
width:"7em",
height:"7em",
duration:"medium"
}, 'medium', 'linear', function() {
$('#statusGraphic').attr('src', 'state2_138x28.gif');
})
.fadeTo(500,0.5);
$('#portfolio')
.fadeTo(500,1.5)
.animate({marginLeft:"-220px", width:"12em",height:"12.5em",duration:'medium'})
.animate({marginLeft:"-330px", width:"10.1875em",height:"11.875em",duration:'medium'});
});
});
});
//end first click routine animation and replacement
These are the lines I need to put in correctly:
var arc_params = {
center: [278,120], //(cooridinates of center of circle)
radius: 186, //half the size
start: -90, //north is 0, measured clockwise
end: 90, //north is 0, measured clockwise
dir: -1 //only required if direction is not obvious or you want to change it
};
$("#account").animate({path : new $.path.arc(arc_params)},1000);
As above, I have them trying to be instantly called but I want them to happen after clicking and after (#content2) is revealed.
Can anyone point me in the right direction?
Thanks
1
