public
Last active

jQuery helper for easy reversion of element properties

  • Download Gist
JqFxStack_test.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
/*
AUTHOR: Tomasz Zielinski
LICENSE: public domain where appropriate; free for everyone, for all usages, elsewhere
*/
 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://gist.github.com/raw/707286/0a562b4a054fb553abb2a00972645681a85b2968/JqFxStack.js"> </script>
</head>
<body>
<div id="d1" style="width: 100px; height: 50px; background-color: blue;"></div>
<div id="d2" style="width: 100px; height: 50px; background-color: red;"></div>
<div id="d3" style="width: 100px; height: 50px; background-color: green; display: none;"></div>
<div id="d4" style="width: 100px; height: 50px; background-color: yellow;"></div>
<script type="text/javascript">
$(function () {
var fx_stack = new JqFxStack();
 
fx_stack.animate($('div#d1'), {'width': '200px'}, {'duration': '2000'});
fx_stack.css($('div#d2'), {'width': '300px'});
fx_stack.show_block($('div#d3'));
fx_stack.hide($('div#d4'));
 
setTimeout(function () {
fx_stack.revert($('div#d1'));
fx_stack.revert($('div#d2'));
fx_stack.revert($('div#d3'));
fx_stack.revert($('div#d4'));
}, 2000);
});
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.