CODEWITHSUNDEEP
javascriptjqueryjquery-animatefadeout
Marcus Riemer
Marcus Riemer

Reputation: 7688

Fading out combined with movement

I hope this question is no exact duplicate ... But none of those related questions helped me to tackle my problem. I want to animate an endless "stream" of rectangles. Whenever the user clicks an element I want:

So far I have come up with this (According jsFiddle):

    $('.block').first().animate({
        opacity: 0.75,
        left: '-=50'
    }, 300, function() {
        $('.block').first().remove();
        addBlock(index++);
    });

Animating the opacity works fine, moving to the left does not. I would suspect this is probably due too the surrounding div. But to be honest I have not much clue about web techniques, thats why I am asking you.

Upvotes: 2

Views: 248

Answers (2)

Lix
Lix

Reputation: 47976

Just add position:relative to your css .block entry, use marginLeft and you'll get the desired effect -

http://jsfiddle.net/BsEWp/67/

To slide it under a wrapper div, all you'll have to do is give the wrapper element a css property overflow:hidden.

Upvotes: 5

Kir
Kir

Reputation: 694

May be like this?

$('.block').first().animate({
    opacity: 0.25,
    width: '-=50'
}

or:

$('.block').first().animate({
    opacity: 0.25,
    marginLeft: '-=50'
}

it's works

Upvotes: 2

Related Questions