2

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?

2 Answers 2

5

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.

2
  • Wow, thats a quick answer. But somehow this only causes the first element to be moved to the left. I was hoping the other elements would dynamically take up the "remaining" space. Is there a possibility to let those other rectangles "follow up" without animating them explictly? Jul 27, 2012 at 10:06
  • It seems that $('.block').first().animate({ opacity: 0.75, margin-left: '-=50' } will not compile. Jul 27, 2012 at 10:21
2

May be like this?

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

or:

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

it's works

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.