jQuery Slide CSS Element Out Reducing Opacity

Question

Hi I am trying to slide a CSS element out, gradually removing the opacity until it is fully disappeared.

e.g I want to slide a text to the right which reduced opacity whilst it is sliding till its fully disappeared.

//JQuery
$(document).ready(function() {
    $('.heading1').animate({marginRight:"20px",opacity:0},500)
})
//HTML
<div class="sliderContainer">

<a class="heading1">Text</a>

</div>

//CSS
.heading1 {
    position:relative;  
}

I have tried this but it doesn't really slide out, like move across the screen. It just fades out. Any idea?

I want to be able to animate it in and out of the screen reducing opacity when it does.

http://stackoverflow.com/questions/1652576/how-do-you-fadein-and-animate-at-the-same-time it´s solved here — Marc Ster, May 18 '13 at 14:24

score 1 · Accepted Answer · answered May 18 '13 at 13:54

1

Use integers (20) instead of strings (20px):

$(document).ready(function() {
      $('.heading1').animate({'margin-right':20,opacity:0},500);
})

answered May 18 '13 at 13:54

mate64

8,500
15
58
93

That did not work, also, why do u have "''" around margin-right and not opacity. It just fades out due to opacity, but doesent slide out whilst its doing that. – Kay May 18 '13 at 13:56
`'margin-right'` is separated with a *delimeter* `-` and can not be used as an `object key`. However, this code works fine for me. You may have to look at your css settings ? – mate64 May 18 '13 at 14:01
Do you have to do anything with the CSS element? I tried setting .heading1 position: relative. but didint work either. Check my edited OP. Edit i understand why it didint work because it didint have any more margin remove to move to the right – Kay May 18 '13 at 14:13

jQuery Slide CSS Element Out Reducing Opacity

1 Answers1