r2352 - moved the dev-animate directory to test/visual
Author: a.farkas.pm
Date: Sun Mar 22 07:03:00 2009
New Revision: 2352
Added:
branches/dev/effects/tests/visual/animateClass/
branches/dev/effects/tests/visual/animateClass/index.html
Removed:
branches/dev/effects/dev-animateClass/
branches/dev/effects/jquery-1.3.2.js
Log:
moved the dev-animate directory to test/visual
Added: branches/dev/effects/tests/visual/animateClass/index.html
==============================================================================
--- (empty file)
+++ branches/dev/effects/tests/visual/animateClass/index.html Sun Mar 22
07:03:00 2009
@@ -0,0 +1,238 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI animateClass Test Suite</title>
+ <title>CSS -> JS</title>
+ <style type="text/css">
+ body {
+ margin: auto;
+ width: 900px;
+ }
+ p {
+ padding: 0;
+ margin: 40px 0 5px;
+ }
+ div.box {
+ border: 5px solid #000;
+ border-radius: 1px;
+ -moz-border-radius: 1px;
+ -webkit-border-radius: 1px;
+ background: #a66;
+ height: 200px;
+ width: 200px;
+ padding: 20px;
+ }
+
+ div.box.hover {
+ background: #66a;
+ border-color: #a66;
+ border-radius: 9px;
+ -moz-border-radius: 9px;
+ -webkit-border-radius: 9px;
+ width: 300px;
+ padding: 30px;
+ }
+ div.inner-box{
+ border: 5px solid #000;
+ background: #66a;
+ height: 10px;
+ width: 100px;
+ }
+
+ div.hover div.inner-box {
+ background: #a66;
+ border-color: #66a;
+ height: 50px;
+ }
+ div.box input {
+ display: block;
+ width: 160px;
+ }
+ div.box.hover input {
+ width: 220px;
+ }
+ input {
+ border: 3px solid #666;
+ }
+ input:focus {
+ border: 3px solid #a33;
+ }
+ div.height-test {
+ width: 300px;
+ overflow: hidden;
+ padding: 10px 15px;
+ background: #a66;
+ }
+ div.height-hidden {
+ display: none;
+ height: 0;
+ padding: 0 15px;
+ opacity: 0;
+ filter: Alpha(opacity=0);
+ }
+ div.height-small {
+ height: 40px;
+ padding: 5px 15px;
+ opacity: .25;
+ filter: Alpha(opacity=25);
+ }
+
+ .exclude-filter {
+ position: relative;
+ border: 3px solid #000;
+ width: 800px;
+ height: 400px;
+ }
+ .exclude-filter-box {
+ position: absolute;
+ top: 0;
+ left: 0;
+ border: 2px solid #666;
+ color: #fff;
+ width: 80px;
+ height: 80px;
+ background: #444;
+ }
+
+ .exclude-filter-box-animate {
+ background: #eee;
+ color: #000;
+ width: 180px;
+ height: 180px;
+ }
+ ul#queue-test,
+ ul#queue-test li {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+
+ #queue-test {
+ overflow: hidden;
+ zoom: 1;
+ }
+ #queue-test li {
+ display: block;
+ float: left;
+ height: 300px;
+ width: 9px;
+ border-left: 1px solid #339;
+ background: #933;
+ }
+ #queue-test li.hover {
+ background: #339;
+ border-left-color: #933;
+ }
+ </style>
+ <script type="text/javascript" src="../../../jquery-1.3.1.js"></script>
+ <script type="text/javascript"
src="../../../ui/effects.core.js"></script>
+ <script>
+ (function($){
+ $(function(){
+ $('div.special')
+ .hover(function(){
+ var childs = $('*', this)
+ .stop(true);
+ $(this)
+ .stop(true)
+ .addClass('hover', {duration: 999, clearInlineStyles: true,
animateChilds: childs});
+ },function(){
+ var childs = $('*', this)
+ .stop(true);
+ $(this)
+ .stop(true)
+ .removeClass('hover', {duration: 999, clearInlineStyles: true,
animateChilds: childs});
+ });
+
+ $('div.box:not(.special)')
+ .hover(function(){
+ $(this)
+ .stop(true, true)
+ .addClass('hover', {duration: 999});
+ },function(){
+ $(this)
+ .stop(true, true)
+ .removeClass('hover', {duration: 999});
+ });
+
+
+ $('div.exclude-filter')
+ .click(function(){
+
+ var dynCss = {
+ top: 200 * Math.random(),
+ left: 600 * Math.random()
+ };
+ $('div.exclude-filter-box', this)
+
+ .stop(true, true)
+ .toggleClass('exclude-filter-box-animate', {
+ duration: 500,
+ clearInlineStyles: true,
+ filterCallback: function(opts){
+ $.extend(opts.animateStyles, dynCss);
+ opts.resetStyle = 'top: '+ dynCss.top +'px; left: '+
dynCss.left+'px;';
+ }
+ });
+ });
+
+ $('#queue-test li')
+ .hover(function(){
+ $(this)
+ .addClass('hover', {duration: 200, clearInlineStyles: true});
+ },function(){
+ $(this)
+ .removeClass('hover', {duration: 400, clearInlineStyles: true});
+ });
+
+ $('button.hide')
+ .click(function(){
+ $('div.height-test')
+ .toggleClass('height-hidden', {duration: 500});
+ });
+
+ $('button.small')
+ .click(function(){
+ $('div.height-test')
+ .toggleClass('height-small', {duration: 500});
+ });
+ });
+ })(jQuery);
+ </script>
+ </head>
+ <body>
+ Extra Options: {clearInlineStyles: true, animateChilds: '*'}:
+ <div class="box special">
+ <input type="text" />
+ <input type="text" />
+ <div class="inner-box"></div>
+ </div>
+ Extra Option: {filterCallback: function...}, click somewhere:
+ <div class="exclude-filter">
+ <div class="exclude-filter-box"></div>
+ </div>
+ queue-dequeue Test
+ <ul id="queue-test">
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+
<li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
+ </ul>
+ Height/Opacity Test <!-- (<a
href="http://dev.jquery.com/ticket/3981">minor Opacity Bug in IE</a>)
-->:
+ <button class="hide">toggle height/opacity hidden</button>
+ <button class="small">toggle height/opacity small</button>
+ <div class="height-test">
+ Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua.
+ Lorem ipsum dolor sit amet, consectetuer sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua.
+ </div>
+ classanimation (standard options with stop-method):
+ <div class="box">
+ <input type="text" />
+ <input type="text" />
+ <div class="inner-box"></div>
+ </div>
+ </body>
+</html>
\ No newline at end of file