Search jQuery

jQuery Forum

Using jQuery

garavani

mix of e.data and custom event?

in Using jQuery • 10 years ago

Hello all,

I think I need some help with a little question.

In my code I use e.data for a window resize function that changes CSS of elements.

So I have:

$(document).ready(function() {

sizing_I({data: {zoom:2.4}});

$(window). on('resize', function() { …other functions here… })

.on('resize', {zoom:2.4}, sizing_I);

});

and the function:

function sizing_I(e)

{

var wh = $(window).height();

var f = e.data.zoom; var f2 = f*2; var f4 = f*4; var f10 = f*10; var f20 = f*20; var f150 = f*150; var f300 = f*300;

$("#elements") .css({'width': (wh/f10) + 'px','height': (wh/f) + 'px', 'margin-left': -(wh/f20) + 'px', 'margin-top': -(wh/f2) + 'px'})

.find('div')

.css({'width': (wh/f150) + 'px','height': (wh/f4) + 'px', 'margin-left': -(wh/f300) + 'px'});

}

that uses one „factor“ to resize, reposition (centering) and zoom elements.

Works satisfying.

But now I would want that from some other place (while animations are running) this „factor“ could be changed (possibly beeing animated to, but this later)

How could I change from some function the e.data later?

I know that this has something to do with custom Event and in theory I know the way but I have difficulties in understanding and using e.data and trigger(…) at the same time.

Because I like that the e.data is known at the beginning but could be neverthelss changed LATER on, too.

Thank you for your ideas and explanations!

Garavani

Replies(4)

jakecigar

Re: mix of e.data and custom event?

10 years ago

try

$(window).off('resize’,sizing_I).on('resize', {zoom:3.0}, sizing_I);

JΛ̊KE

garavani

Re: mix of e.data and custom event?

10 years ago

Hi Jake (again:-)

in fact I did so in my code as follows:

function sizing_I(e)

{

var wh = $(window).height();

var f = e.data.zoom; var f2 = f*2; var f4 = f*4; var f10 = f*10; var f20 = f*20; var f150 = f*150; var f300 = f*300;

$("#I, #glow") .css({'width': (wh/f10) + 'px','height': (wh/f) + 'px', 'margin-left': -(wh/f20) + 'px', 'margin-top': -(wh/f2) + 'px'})

.find('div')

.css({'width': (wh/f150) + 'px','height': (wh/f4) + 'px', 'margin-left': -(wh/f300) + 'px'});

}

function zooming_I()

{

var wh = $(window).height();

var f = 1.9; var f2 = f*2; var f4 = f*4; var f10 = f*10; var f20 = f*20; var f150 = f*150; var f300 = f*300;

$("#I") .animate({'width': (wh/f10) + 'px', 'height': (wh/f) + 'px', 'margin-left': -(wh/f20) + 'px', 'margin-top': -(wh/f2) + 'px'},5000)

.find('div')

.animate({'width': (wh/f150) + 'px','height': (wh/f4) + 'px','margin-left': -(wh/f300) + 'px'}, 5000);

$(window) .off('resize', {zoom:2.4}, sizing_I)

.on ('resize', {zoom:1.9}, sizing_I);

}

function startAnimation()

{

$whiteLine = $("#white_line");

$glow = $("#glow").children();

$character = $("#character");

$name = $("#name");

$whiteLine .stop(true,true).delay(2700)

.animate({'top': '0%'},950,'easeOutSine', function(){

$glow.delay(600) .animate({opacity: 1},2400,'easeOutSine');

$whiteLine.parent() .delay(600).animate({backgroundColor: '#000000'},2400,'easeOutSine', function(){

zooming_I();

var wh = $(window).height();

var lmove = wh/3.6;

$whiteLine.next() .delay(1500)

.animate({opacity: 1, left: (-lmove)+'px'},7800,'linear')

.animate({opacity: 0},1500,'linear', function(){

$glow.delay(500).animate({opacity: 0},950,'easeOutSine');

$whiteLine.parent().delay(500).fadeOut(950,'easeOutSine', function(){

$character .delay(1500)

.fadeIn(3000, 'easeInSine')

.children()

.animate({'max-width': '100%','max-height': '100%'},2400,'easeOutSine')

.css('cursor', 'pointer')

.click(function(){ restartAnimation(); });

$name .delay(300)

.fadeIn(600, 'linear', function(){description();});

});

}

but this solves the problem of correcting resizing my element only in part: before and after the zooming action. I thought it might be possible to insert the zooming keeping the resizing function at work simultanously. But I guess its kind of silly and wanted too much, because it suggests that the user manipulates the window during the animation progress.

But just for curiosity I tried also with a global variable for the zooming/sizing factor but obviously the two functions are colliding and so I guess I will keep it this way.

Thanks again for your quick response, Jake

Garavani

garavani