1

I have posted a code on http://jsfiddle.net/GxpSQ/ with a working code. Click the box and it will shuffle.

Based on hungred.com

I based my code on this example http://hungred.com/wp-content/demo/jQuery-Shuffle-effect/demo.html

The problem

Compare my effect with hungred.com. My effect will "blink" because the box does not go out far enough before it returns.

The box on hungred.com goes out in the open space BEFORE index-z is set. That is what I want as well. What did I miss?

Jens Törnell
  • 23,180
  • 45
  • 124
  • 206

2 Answers2

2

Here's a variant with a custom step function, that sets zIndex in the middle of the animation, when the animated element is in the "out" phase of the easing.

No flicker!

http://jsfiddle.net/Dgfcy/

katspaugh
  • 17,449
  • 11
  • 66
  • 103
  • Not exactly what I was looking for but very interesting way of solving it. The final result can be seen here: http://www.webblayout.se/ – Jens Törnell Sep 13 '11 at 11:28
  • @Jens, it isn't flickering, but jerking back quite unpleasantly. By the way, in my browser a horizontal scroll-bar appears every time you click on the images. (Chrome, 1440x900). – katspaugh Sep 13 '11 at 11:57
  • About the "jerking". Do you mean that the easing is more soft in your version? I know about the horizontal scrollbar. Your script is suffering that same issue. Try to resize your window close to the div. When clicking the scrollbar appears. – Jens Törnell Sep 13 '11 at 14:02
  • One continuous animation is definitely smoother than two separate animations. Two accelerated movements in opposite directions is the definition of jerking. While `easeOutBack` is defined by acceleration up to a certain point and then smooth deceleration to full stop after that point. Two consequent `easeOutBack`s are completely missing the point. – katspaugh Sep 13 '11 at 14:17
  • Though, after revisiting the hungred.com example, I appreciate that "jerking" might be indeed the desired effect. – katspaugh Sep 13 '11 at 14:31
  • @Jens Törnell, addressing the scroll-bar issue, I think you could set the container's `overflow-x` property to `hidden` during the animation. Good luck, bye! – katspaugh Sep 13 '11 at 14:34
0

Just chain up one more animate to existing animate like this

Kavitha K Gowd
  • 527
  • 1
  • 3
  • 9
  • @Jens Törnell, it's jerky. Compare http://jsfiddle.net/GxpSQ/3/ and http://jsfiddle.net/Dgfcy/, and you'll see why. – katspaugh Sep 13 '11 at 11:59