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:
- All elements, including the new one, slowly moving to the left until the second rectangle is in the place of the first rectangle
- The first rectangle to fade out
- A new rectangle to fade in at the end
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.
- What can I do to make my rectangles move left?
- Can I possibly move them to the left while "sliding under" the surrounding div?