Question

Is there a way to change the opacity of a nested element during a jQuery animation?

I want the parent to move up 500px (top -= 500).
I want Nested1 to from 100% -> 25% opacity (opacity: .25)
I want Nested2 to from 0% -> 100% opacity (opacity: 1)

Is there a way to do this? Or do I need to run concurrent jQuery animations?

If I need to run concurrent jQuery animations – how do I do that?

Answer 1

You can have simultaneous animation using jQuery. But having the opacity of child element different than the parent is not possible. This is not supported by any of the browser.

$(function () {
    $("#element1").animate({
       top: '-=500px'
    }, { duration: 200, queue: false });
    $("#element2").animate({
       opacity: '25%'
    }, { duration: 200, queue: false });
});