CODEWITHSUNDEEP
jquerycss
Kay
Kay

Reputation: 19690

jQuery Slide CSS Element Out Reducing Opacity

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.

Upvotes: 0

Views: 333

Answers (1)

mate64
mate64

Reputation: 10082

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

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

Upvotes: 1

Related Questions