This is the jsFiddle. What I would like is stop the box when it reaches its end position. I know there is a transition function available also but that does not seem to work. Are all animation functions type also available for transition? I am using rotate function in my actual work.
Just set animation-iteration-count to 1. A value of infinite causes the animation to be repeated infinitely. And remember to style the object the way it should be AFTER the animation (top: 200px;).
I've updated the fiddle: http://jsfiddle.net/nTG42/2/
More information is provide by the MDN: https://developer.mozilla.org/en/css/css_animations
Remove the infinite from animation:mymove infinite; and set the final place as top:200px. Demo
Related
The scenario is like this :
two adjacent element
A & B, overlapping elements(A has absolute positioning) both toggle between CSS transform scale(0) to scale(1) i.e when A is shown B is hidden
I have applied an infinite animation on A (SVG opacity changing grom 0.7-1).
When A is hidden, it's animation still seems to be working.
How to fix this without using display: none
You can remove a class with animation for A, and then, if the animation needs to be resumed, return the class with the animation again.
I think the best approach to do this would be setting animation: none or animation: unset when A is hidden. You can set up a watcher, like this one, to watch for A's property changes and then use an if conditional to check if it has reached its "hidden state." Then you can document.getElementById('its id').style.animation = unset
A bonus tip would be using else to set the animation property back to normal once it is "unhidden."
I am trying to create two buttons that will move up when clicked. My problem is that after the animation occurs, the hover animation for the buttons no longer work. From my research I have gathered that it is something to do with animation-fill-mode: forward but I have found no solution that will allow the buttons to animate properly. Here is my relevant code
https://jsfiddle.net/kaizerroll987/j4owy2x7/#&togetherjs=qrfIRBIkon
Forward animations will cause the element to retain the style values from the last keyframe when the animation ends. Simple remove the animation-fill-mode attribute and your hover animation should work.
Im gonna take a random stab. There is a severe lack of info here...
On hover, set animation-name or I guess maybe animation-fill-mode to none.
.elem:hover {
whatever: settings-you-want;
animation-name: none;
}
I just did something similar.
The animation will take priority over hover.
I have a Div with the id of center. I set the opacity of the Div to 0 in CSS file. when the window loads, I give the Div an animation:
document.getElementById('center').style.animation = "UP 1s forwards";
if the user click a button, I change the animation to:
document.getElementById('center').style.animation = "DOWN 1s forwards";
Problem: the second animation doesn't show up, the Div suddenly disappear.
A example fiddle or some more code might help. Lot of things could be wrong.
Your keyframes for the down animation might be starting with opacity 0;
You need to set some position property in CSS to use top/right/bottom/left properties. Check that.
There might be something wrong with the JS on click.
Just some things I can think of.
It feels like a toast animation by what you described. Here's a fiddle.
https://jsfiddle.net/thelessergeek/rj7a06hm/
Hopefully you were looking for that. My JS might be a little sad. Work it out as you see fit. Thanks!
I want to stop a transition that is in progress.
I have found a few references[1][2] scattered around the internet but I can't seem to piece it together.
Here's a fiddle of the first suggestion (With jQuery and CSS Transit for context): http://jsfiddle.net/thomseddon/gLjuH/
Thanks
[1] https://twitter.com/evilhackerdude/status/20466821462
[2] github.com/madrobby/zepto/issues/508
So I figured it out: http://jsfiddle.net/thomseddon/gLjuH/3/
The trick is to set each css property you are animating to its current value (possibly mid transition) like: $(this).css('prop', $(this).css('prop')); (Probably would want to store all properties in an object in the element with $(this).data(props); and loop through them).
Once you have explicitly set the properties you can run a 0s animation to override the previous animation and effectively halt the element.
There's a much simpler solution. If you want to just stop the transition (and not pause it). Just set the css to current computed style. For example in a custom scrolling solution, where top is transitioned property.
element.style.top=getComputedStyle(element).top;
and that's it.
I'm using a drop-down-menu which I modified to use animations such as SlideOut and FadeIn using onmouseover and onmouseout.
The problem comes after hovering through all of the nested lists a few times, which results in the second nested list becoming cut off.
You can replicate the bug by moving from "nav 1" to "nav 2" and back again rapidly.
Link to jsFiddle
Screenshot of cut-off:
http://dl.dropbox.com/u/53879403/screenshot.png
Please and thank you for any advice / criticism.
Please see this fiddle: http://jsfiddle.net/SuRJ9/
The code I've changed:
function slideDown(toSlide) {
currentHover(toSlide);
$($(toSlide).children('ul')[0]).slideDown('medium',
function(){ $(this).css('overflow','visible') });
}
I've added resetting overflow to visible after finishing animation. overflow is set to hidden by jQuery in order to make sliding animation.
Also, please don't use onmouseout="slideUp(this)" and onmouseover="slideDown(this)", this is obtrusive JavaScript and is a bad technique. You should assign these events using jQuery.
$.fadeOut/In() apply certain styles before running the animation. These are remove when the animation completes.
Your fadeOutNav() is calling stop(true) , which if done while fadeOut() or fadeIn() are working, will leave the style's they have applied to the element. In this case overflow:hidden on the parent ul. You can remove the stop and let the effects bubble up, or insert a .css('overflow','') to your chain.