To follow up on what Wizzud said. I just had a similar issue using
the cycle plugin for jQuery. I wrote a custom transition called
centerFade for it, I figured this out by using an example on this
board posted by Mike Alsup. Below is the transition.
jQuery.fn.cycle.transitions.centerFade= function($cont, $slides,
opts) {
var w = $cont.width();
var h = $cont.height();
var elW = $slides[0].offsetWidth;
var elH = $slides[0].offsetHeight;
var dx = ((w/2)-(elW/2));
var dy = ((h/2)-(elH/2));
opts.before.push(function(curr, next, opts) {
jQuery(this).show();
opts.cssBefore = { top: dy, left: dx };
opts.cssAfter = { display: 'none' };
});
opts.cssFirst = { top: dy, left: dx };
opts.animIn = {opacity: 1 };
opts.animOut = {opacity: 0 };
};
To call it:
$('#parent').cycle({
fx: 'centerFade',
delay: 500,
autostop: 1,
});
This will wait half a second fade the child and then never fade
again. You may need to modify the custom transition, to have the
child hidden first then fade it, as this transition assumes you want
the first slide displayed. Or in your example you could just add a
dummy div, which has nothing in it, it will transition to the child
div and then stop.
Hope this helps.
-jags78
On Nov 23, 6:43 am, Wizzud <[EMAIL PROTECTED]> wrote:
> Roughly:
> - get the width, height, top and left of the parent (width(), height()
> and offset())
> - get the width and height of the child
> - calculate top and left of the child (simple maths)
> - set the top and left of the child according to the calculated values
> above (css())
> - fade in child (fadeIn())
>
> The above are not fixed in stone because it *very much* depends on
> what else is going on around the divs in question, whether there is
> other content in parent, and how the divs are 'position'ed (static,
> relative, absolute).
> For example, if parent is empty except for child, then you could vary
> the parent's padding, or the child's margins, to centre the child.
> If parent is relative and has other content that child will cover,
> then child will be absolute and the above applies.
> On the other hand, if parent is static (with other content) then you
> will have to position the absolute child according to the next non-
> static element up the DOM.
> Alternatively, if both never change in size, use styles to position
> them and simply fade in child when needed.
>
> There are too many variables/unknowns to be able to give a definitive
> answer.
>
> On Nov 22, 10:06 pm, shapper <[EMAIL PROTECTED]> wrote:
>
> > Hello,
>
> > I have 2 divs:
>
> > <div id="parent">
> > <div id="child">
> > </div>
> > </div>
>
> > I need to create a function using JQuery that when called does the
> > following:
> > 1. Centers child inside parent
> > 2. Fades in child
>
> > How can I do this?
>
> > Thanks,
> > Miguel
