I'm having trouble in trying to pause and resume a JQuery.animated object, it pauses fine but once it resumes animation it resets the animation from its current position so it ends up moving past the spot where it was meant to stop.
Heres a jsFiddle: jsFiddle to help explain it better.
Thanks for you help.
Is this what you were trying to achieve?
I was just using the suggestions from #DarthJDG, also added the element's height so it doesn't go below the window border.
http://jsfiddle.net/HemUe/2/
The problem is that you're using relative animation targets. As far as I can tell, the plugin only takes the time elapsed into account when restarting the animation, the properties remain the same.
So if you start a linear animation for 5 seconds to move an element +100px and pause the animation after 2 seconds, it has already moved 40px. When the animation resumes, it will start an animation to move +100px for 3 seconds, and the element ends up moving 140px in total.
The solution is to use absolute values when calling $box.animate(), converting relative values to absolute there and then if necessary. Instead of moving "+="+windowHeight, set it to $box.position().top + windowHeight.
You might want to report this bug/limitation to the plugin's developer, but as the plugin's version is only 0.1, he might be well aware.
Related
I have a container that is quite similar to an image slider, and designed for horizontal touch/mouse drag to move between slides. For aesthetics, an easing function is applied so that it glides into place centered on each slide when released. The method of movement is "transform: translateX()".
The problem I'm currently having is that, if the user releases, then touches and and moves it again while it's already in motion, it will jump to the slide at the end of it's transition. So for example: if you are in slide 1, move it and release while it's in the zone for slide 2, and then try to move again while it' still in motion, it will jump to slide 2 immediately, and then move from there to wherever I move my finger.
What I'm essentially looking for is a way to get the intermediate transition distance while the translation animation is running. Is there any way to measure where an element actually is in the middle of transition? If not, what are some solutions for this situation?
EDIT:
I found out the root cause to my issue, although it doesn't change the focus of the question. To give a broader explanation of what was going on, I'll include it here.
The default transition duration time was set to 300ms. When a user drags on the content by mouse or by touch, this was set to 0ms so that it wouldn't lag behind the user's movements. When released, it would be set back to 300ms. If it was grabbed again while it was in motion, it would take the position it was transitioning to and snap there when the duration was set to 0ms. This was better than then alternative of allowing it to continue to flow there while dragging again, as the content would slide under the drag point.
Per the comments on the question post, I assume this means the answer to my first question is: no, you cannot get the intermediate values directly during translation.
As to the second question, the comments mention the option of preventing activity until the animation completes. While this would work, I felt it would also diminish the UX, and so I decided to try something a little different. My solution seems to work quite well as a workaround, and so I decided to answer my own question and post it here for others. I also edited the question with a little more detail.
What I ended up doing was using a timer to predict the position of the intermediate value, so that if interrupted, it would appear to seamlessly stop mid-transition in the correct place.
Doing this required a little math, and the precise formula is dependent on what sort of easing is employed. "Linear" easing is the easiest to predict, but the others are quite doable with a little bit of trigonometry. I used "ease-out", so I'll include my solution for that one in pseudo-code below:
startX + (finishX - startX) * sin((now - startTime) / transitionDuration * PI / 2)
startX is the position the slider was at when released (beginning of transition).
finishX is the position the slider is moving towards (end of transition).
now is the current time in milliseconds.
startTime is the time the slider was at when released (beginning of transition).
transitionDuration is the amount of time the transition takes to complete in milliseconds.
In summary, the above allows you to predict the position of an element during transition. While specifically written for "ease-out", it should be trivial to adapt it to other basic curves.
I found this beautiful website (http://soworldwide.org/) and want to create a similar slideshow. After I've spend a lot of time to make it work, I still can't figure it out.
Right now it's looking like this:
http://bit.ly/1bktxcx
Wait undtil the last picture and then you can see how the slideshow refreshes. Can someone help me, so I get the same animation like theirs?
I'm using the same Jquery Plugin by the way.
Thank you in advance.
You're setting the top of the list-begin image to zero at the same time that you're starting the animation for the list-end image. Because the zIndex of the list-begin image is 3, you're causing the list-begin image to hide the animation of the list-end image. I recommend dynamically updating the zIndex for each image when you do the animation. For slides that are hidden (by setting the top to a negative value, as you're doing), you can ignore the zIndex. But before you set the top to zero for your next image, set the zIndex for curr to 1 and the zIndex for next to 0.
Edit: I figured this out using the Chrome JS debugger and liberal use of console.log(). Maybe you did all the right things and still couldn't find the problem, and just needed a second set of eyes. But if you didn't do all the right things, remember: the debugger is a powerful tool.
I am trying to animate images of clouds on my website to slowly move through my header, as on http://toriseye.quodis.com/ using prototype and script.aculo.us. I can't get the effect right as it is too fast, appears to rise towards the end, isn't smooth and it won't repeat after the first run. For some reason I can't post the jsfiddle.net link in the question box, so see my comment below :)
Firstly use transition: Effect.Transitions.linear as that will make it smooth
plus you are running the interval at 1 second (1000 milliseconds) but telling the Move Effect to last for 5 seconds - this will confuse the heck out of the javascript
Then you need to reset the position of the element you are moving - use the afterFinish callback to do so
I'm not sure the exact reason it is rising - but if you use the relative mode and just use an x parameter it does not rise
take a look at my edits to your fiddle
http://jsfiddle.net/nukt2/4/
I'm assuming your goal is multiple clouds - I would look at the Parallel Effects option so they are all running on the same timer
http://madrobby.github.io/scriptaculous/effect-parallel/
I have a box that takes an input, then uses the scrollable's seekTo method on keyup to go to a particular slide. The problem is that if someone types quickly the scrollable gets a large queue and it takes a while for the animation to stop.
What I would like is on keyup the previous animation stops (unless the input is empty) and the new animation starts. I've tried putting .stop() in various places, but nothing seems to work.
Here is a fiddle of something similar to what I'm doing: http://jsfiddle.net/QaMZH/
Putting a number in the box (ex:1) then changing it to another number (ex: 2) will animate the scrollable to that slide number, but changing the numbers quickly queues a bunch of animations that can take a while to finish.
I had the same problem, and after searching for more detailed documentation and fail, I just dug into the code.
It turns out that all you need to do is call this before .seekTo():
api.getItemWrap().stop(true, false);
api.seekTo($(this).val(), 1000);
where getItemWrap() returns the target jQuery element where the animation takes place.
See http://jsfiddle.net/QaMZH/4/ how the modified version works.
This works because .seekTo() method calls the jQuery .animation() method on the elements, and you can cancel jQuery animations any time with .stop().
http://spacedout.co.uk/spaced_out_architects_architecture_portfolio
The slider transitions fine until it gets to slide 20 to 21 and above increments when for no apparent reason it seems to slide through all the slides again. It still ends up on the correct slide however.
Does anyone have any idea why it would be doing this?
It uses the (wordpress) wp-coda-slider plugin, I just can't work out why it does this after 20 slides. I've tried using different transitions and time intervals and it makes no difference. Has anyone had this problem before or know where to look to try to find out why it's doing this?
Much thanks
Dom
It slides all the images, but when the slider runs out of images, the next transition returns you to the first image, but with the same transition time as the ordinary image sliding.
You might want to try something like this: Infinite Carousel