CODEWITHSUNDEEP
jquery
Andy
Andy

Reputation: 3021

Slide and fade jquery

How can i slide a div in whilst it fades in using jquery. I guess it would need to be offset slightly from the position stipulated within the style sheet.

So for example this div would slide in from the left whilst fading into 100% from 0.

<div id="pageintro">We are a wholly independent</div>

Upvotes: 0

Views: 4053

Answers (2)

bafromca
bafromca

Reputation: 1946

Sorry to answer an old post, but jQuery Mobile 1.1RC1 performs this by default[1]

[1] http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-transitions.html

Upvotes: 0

Damien-Wright
Damien-Wright

Reputation: 7554

Assuming the element is already hidden / opacity at 0:

$('#pageintro').animate({
    opacity: 1,
    left: '+=100'
}, 1000);

The above example will only work on elements with the 'left:' css attribute defined :)

Alternatively:

$('#pageintro').animate({
    opacity: 1,
    marginLeft: '+=100'
}, 1000);

This will work on most elements :)

They will move the element 100px from the left to the right and from 0 opacity to 1 (completely visible) in 1 second.

:)

Upvotes: 1

Related Questions