Develop Reference

How to remove an infinite animation from a hidden element

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."

JS. Non-standard overlay over table

I have visual selection for table which colorize mouse overed table cell and it row and column, like some crosshar.
see JSFiddle:
http:// jsfiddle.net/arhangelsoft/0ardb3u0/40/
But I'm need JS automated and animated movement with effects(like easing), like from 0,0 crosshair smooth moves to 55 cell, after that the same smooth moves to 22 cell and etc.
I thinking, how to do that.
Currently I have an idea:
Create absolute div for row(u see it in blue color), columns and target cell.
After that move theese elemets together in animate funtion from x point to y point.
Is there more simply method/idea to do it?
The similar example of result what I want get via JavaScript you can dewnload here(GIF picture, big(2 mb) ):
download and see
sorry, I can't make it smaller.

Here you go: http://jsfiddle.net/andunai/0ardb3u0/41/
(I've commented out all your code as a reference, the new code is at the bottom of fiddle.)
You are right: the approach here is to actually create 2 absolute divs and to move them according to hovered cell.
For the animation we can use CSS transition property here:
transition: all 0.1s linear
...so that when we do $(...).css(...) changing its width, height, top and bottom, properties are transitioned smoothly from old value to new one.
You can still use jQuery's $.animate() method for the animation, but CSS transitions are basically much more faster and smoother.
Also, note that I've used $(...).outerWidth(...) instead of width(...) to properly resize cells.
One more thing: note this CSS line -
pointer-events: none;
It is very important because it makes the crosshair divs 'transparent' for mouse events, meaning actual clicks will go "through" them and will be captured by appropriate td element.
Enjoy!

:not(:hover) not working with opacity

I have the following code:
#topbar:not(:hover){
-skrollr-animation-name: topbaropa;
}
#topbar:hover {
-skrollr-animation-name: topbarhoveropa;
}
It's supposed to fade the opacity of #topbar when scrolling gradually to 0.10, but when you hover #topbar the opacity goes back to 1, then mouse off goes back to 0.10.
The problem is, it doesn't work. It fades while scrolling, but doesn't go back to 1 on mouseover.
I've also tried instead of #topbar:hover { -skrollr-animation just using opacity: 1 but that doesn't work either =/
If anyone wants to actually see what I mean the link is http://pattersoncode.ca/new%20design/?a=help

skrollr-stylesheets does not support interaction.
skrollr-stylesheets does not react to changes in the document. The stylesheets are parsed once and then applied. You can't add a class to an element and expect the keyframes to get updated.
https://github.com/Prinzhorn/skrollr-stylesheets#limitations

Simply added a class on hover, and removed the class on mouse off.

CSS3 transitions animation

I'm very new to CSS/HTML/JS so I don't have lots of experience with CSS transitions.
I'm trying to animate a div elements on my page, but I can't achieve a desired result so far.
Here is my problem:
In my HTML I have a div container element that has 5 div elements inside of it. They look like simple boxes positioned in the middle of the screen and aren't visible for now. I also have 5 buttons in the corner of the screen.
What I'm trying to do is:
when I click a button (for example button 3) 3 of the divs on the left should disappear and be moved to the left behind the margin of the screen and 2 of the divs should do the same, but move to the right. After that I want 3 divs that are on the right slide back to the screen and 2 divs on the right should slide back as well. So it looks like they sliding towards each other to the positions they started from initially.
I'm trying to do this effect using CSS transitions (transform: translateX(Npx);). So in my JS file I have something like this:
$(document).ready(function() {
$(".button").click(function(){
// PART 1
// move 3 divs to the left using transform: translateX(Npx) (no animation)
// move 2 divs to the left using transform: translateX(Npx) (no animation)
// PART 2
// slide 3 divs to the left using transform: translateX(Npx) (with animation)
// slide 2 divs to the left using transform: translateX(Npx) (with animation)
});
So the problem is that in this case only the part one works and part two seems to be not working.....if I attach the part on code to a different event...like another click button...it works just fine.
So my question is if these two transitions can be done under one event?!?!

I have done this, and this kind of effect can look great. If I understand your question correctly, your issue is that you run the animation AFTER you moved the divs, so your animation function uses the wrong starting point.
What you need is:
Be sure you have a CSS position:relative; set on your divs so the animation can work.
Run your animation function moving your divs relative to their current position (i.e. top, left), and include a success callback. You may need to first use offset() and some math to figure out the distance traveled.
On the completion of your animation (success callback), change the relative position of your divs back to 0px (or whatever they were before) and simultaneously perform the function where you actually move the divs to their new position in the DOM using insertBefore(). I've never seen a flicker since these functions are near-instant, but if you see an issue you can set visibility to hidden while you reset the position and move the divs, and then reset the visibility afterward
You can even set custom z-indexes for your divs during the animation that you reset on the success callback, allowing you to determine which elements the divs pass over/under or specifying which is on top if they cross each other.

Div class cleared during Jquery effects?

I have a div that I want to apply a bounce effect to. It's class gives it some left padding to center it on the page.
After examining what happens during the effect with Firebug, it seems that it adds an effect wrapper class and removes my original class. This causes the div to move from the center of the screen, to the left of the screen (padding removed), it bounces, and then it moves back because the class is reapplied. Is there anyway to stop this from happening?

Wrap the bouncing div in another div that has the class used for centering.