Search jQuery

jQuery Forum

Using jQuery

garavani

simplify animating code with variables

in Using jQuery • 10 years ago

Hello,

can someone help me in simplifying the following piece of code.

I suggest there is some e.data stuff to do, but I don’t know if it is possible if there is changing variables, too, in it.

I am quite a beginner so I definitely need help with this :-(

Thank you very much!!!

Garavani

code:

function suggestImage()

{

var ww = $(window).width();

var newiw = (ww/100)*94;

$('#arrowField') .css('width','6%');

$('#arrowIn') .animate({'left': '4%','margin-left': '1px'}, 950, 'easeOutBack');

$("#imageIn") .animate({'width': '6%'}, 950, 'easeOutBack');

$("#shadow") .animate({'left': '6%'}, 950, 'easeOutBack');

if (newiw < 2000)

{

$("#character_lab") .animate({'margin-left': '4%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, 950, 'easeOutBack');

}

else

{

$("#character_lab") .animate({'margin-left': '4%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, 950, 'easeOutBack');

}

$("#letters") .animate({'margin-left': '2%'}, 950, 'easeOutBack');

$("#name") .animate({'margin-left': '3%'}, 950, 'easeOutBack');

};

function letImage()

{

var ww = $(window).width();

var newiw = ww;

$('#arrowField') .css('width','2%');

$('#arrowIn') .animate({'left': '0%','margin-left': '5px'}, 950, 'easeInBack');

$("#imageIn") .animate({'width': '0%'}, 950, 'easeInBack');

$("#shadow") .animate({'left': '0%'}, 950, 'easeInBack');

if (newiw < 2000)

{

$("#character_lab") .animate({'margin-left': '0%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, 950, 'easeInBack');

}

else

{

$("#character_lab") .animate({'margin-left': '0%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, 950, 'easeInBack');

}

$("#letters") .animate({'margin-left': '0%'}, 950, 'easeInBack');

$("#name") .animate({'margin-left': '0%'}, 950, 'easeInBack');

};

function fullImage()

{

var ww = $(window).width();

var newiw = (ww/100)*76;

$("#imageIn") .animate({'width': '24%'}, 1900, 'easeOutBack');

$("#shadow") .animate({'left': '24%'}, 1900, 'easeOutBack');

if (newiw < 2000)

{

$("#character_lab") .animate({'margin-left': '22%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, 1900, 'easeOutBack');

}

else

{

$("#character_lab") .animate({'margin-left': '22%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, 1900, 'easeOutBack');

}

$("#letters") .animate({'margin-left': '24%',}, 1900, 'easeOutBack');

$("#name") .animate({'margin-left': '21%'}, 1900, 'easeOutBack');

$("#text") .animate({'margin-left': '36%', 'margin-right': '19%'}, 1900, 'easeOutBack');

imageout = 1;

}

function removeImage()

{

var ww = $(window).width();

var newiw = ww;

$("#imageIn") .animate({'width': '0%'}, 1900, 'easeOutBack');

$("#shadow") .animate({'left': '0%'}, 1900, 'easeOutBack');

if (newiw < 2000)

{

$("#character_lab") .animate({'margin-left': '0%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, 1900, 'easeOutBack');

}

else

{

$("#character_lab") .animate({'margin-left': '0%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, 1900, 'easeOutBack');

}

$("#letters") .animate({'margin-left': '0%'}, 1900, 'easeOutBack');

$("#name") .animate({'margin-left': '0%'}, 1900, 'easeOutBack');

$("#text") .animate({'margin-left': '19%'}, 1900, 'easeOutBack');

imageout = 0;

}

Replies(1)

garavani

Re: simplify animating code with variables

10 years ago

Ok,

I do not want to pass for someone how isn’t willing to do his homework.

I guess I could end up with something like this:

function animateImage(e)

{

var ww = $(window).width();

var newiw = (ww/100)*e.data.percent;

$("#imageIn") .animate({'width': e.data.imageExtend+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

$("#shadow") .animate({'left': e.data.imageExtend+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

if (newiw < 2000)

{

$("#character_lab") .animate({'margin-left': e.data.charLeft+'%','width': newiw + 'px','height': (newiw/4) + 'px', 'margin-top': -(newiw/8) + 'px'}, e.data.duration, 'ease'+e.data.ease+'Back');

}

else

{

$("#character_lab") .animate({'margin-left': e.data.charLeft+'%','width': newiw + 'px','height': '500px', 'margin-top': '-250px'}, e.data.duration, 'ease'+e.data.ease+'Back');

}

$("#letters") .animate({'margin-left': e.data.lettersLeft+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

$("#name") .animate({'margin-left': e.data.nameLeft+'%'}, e.data.duration, 'ease'+e.data.ease+'Back');

};

$("#Foo").bind('click',{percent:1, imageExtend:1, duration:1, ease:'out', charLeft:1, lettersLeft:1, nameLeft:1, },animateImage);

BUT:

1) is this the right way?

2) I have multiple binding situations in my main code

and there I cannot easily imbed the syntax from above (('click',{percent:1, imageExtend:1, duration:1, ease:'out', charLeft:1, lettersLeft:1, nameLeft:1, },animateImage);

How would this be done?

To explain myself better:

I have a syntax problem because this:

$('#arrowField').bind({

mouseenter: function(){ ({ percent:94, imageExtend:6, duration:950, ease:'out', charLeft:4, lettersLeft:2, nameLeft:3, },animateImage); arrowFieldOut(); },

mouseleave: function(){ …},

click: function(){ …}

does actually not work :-(

I know its hell of complicated but I have to resolve this.

Maybe for someone of you professionals out there it looks completely silly…

Garavani

Top Reply

Response title

Attachments

jQuery Forum

simplify animating code with variables

Replies(1)

Re: simplify animating code with variables

Statistics

Tags

Actions