Skip to content
Permalink
Browse files

Visual tests: Effects cleanup.

  • Loading branch information...
scottgonzalez committed May 15, 2012
1 parent 1f24692 commit 44a086b92cbf5a9f20cba23fc7a44d92f9eda5e2
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.all.css" type="text/css">
<link rel="stylesheet" href="effects.css">
<script src="../../../jquery-1.7.2.js"></script>
<script src="../../../ui/jquery.effects.core.js"></script>
<script src="../../../ui/jquery.effects.blind.js"></script>
@@ -19,7 +19,7 @@
<script src="../../../ui/jquery.effects.shake.js"></script>
<script src="../../../ui/jquery.effects.slide.js"></script>
<script src="../../../ui/jquery.effects.transfer.js"></script>
<script src="effects.all.js"></script>
<script src="effects.js"></script>
</head>
<body>

@@ -186,19 +186,19 @@
<p>Transfer to first element</p>
</div>
</li>

<li>
<div class="effect" id="addClass">
<p>addClass</p>
</div>
</li>

<li>
<div class="effect" id="removeClass">
<p>removeClass</p>
</div>
</li>

<li>
<div class="effect" id="toggleClass">
<p>toggleClass</p>

This file was deleted.

@@ -1,13 +1,9 @@

body,html {
margin: 0;
body {
margin: 1em;
padding: 0;
font-size: 12px;
font-family: Arial;
background: #191919;
color: #fff;
}
body { margin: 1em; }

ul.effects {
list-style-type: none;
@@ -16,8 +12,6 @@ ul.effects {
}

ul.effects li {
list-style-type: none;
margin: 0;
padding: 0;
width: 120px;
height: 100px;
@@ -44,7 +38,7 @@ div.current {
div.effect p {
color: #191919;
font-weight: bold;
margin: 0px;
margin: 0;
padding: 10px;
}

@@ -0,0 +1,107 @@
$(function() {

var duration = 1000,
wait = 500;

function effect( elem, name, options ) {
$.extend( options, {
easing: "easeOutQuint"
});

$( elem ).click(function() {
$( this )
.addClass( "current" )
// delaying the initial animation makes sure that the queue stays in tact
.delay( 10 )
.hide( name, options, duration )
.delay( wait )
.show( name, options, duration, function() {
$( this ).removeClass( "current" );
});
});
}

$( "#hide" ).click(function() {
$( this )
.addClass( "current" )
.hide( duration )
.delay( wait )
.show( duration, function() {
$( this ).removeClass( "current" );
});
});

effect( "#blindLeft", "blind", { direction: "left" } );
effect( "#blindUp", "blind", { direction: "up" } );
effect( "#blindRight", "blind", { direction: "right" } );
effect( "#blindDown", "blind", { direction: "down" } );

effect( "#bounce3times", "bounce", { times: 3 } );

effect( "#clipHorizontally", "clip", { direction: "horizontal" } );
effect( "#clipVertically", "clip", { direction: "vertical" } );

effect( "#dropDown", "drop", { direction: "down" } );
effect( "#dropUp", "drop", { direction: "up" } );
effect( "#dropLeft", "drop", { direction: "left" } );
effect( "#dropRight", "drop", { direction: "right" } );

effect( "#explode9", "explode", {} );
effect( "#explode36", "explode", { pieces: 36 } );

effect( "#fade", "fade", {} );

effect( "#fold", "fold", { size: 50 } );

effect( "#highlight", "highlight", {} );

effect( "#pulsate", "pulsate", { times: 2 } );

effect( "#puff", "puff", { times: 2 } );
effect( "#scale", "scale", {} );
effect( "#size", "size", {} );
$( "#sizeToggle" ).click(function() {
var options = { to: { width: 300, height: 300 } };
$( this )
.addClass( "current" )
.toggle( "size", options, duration )
.delay( wait )
.toggle( "size", options, duration, function() {
$( this ).removeClass( "current" );
});
});

$( "#shake" ).click(function() {
$( this )
.addClass( "current" )
.effect( "shake", {}, 100, function() {
$( this ).removeClass( "current" );
});
});

effect( "#slideDown", "slide", { direction: "down" } );
effect( "#slideUp", "slide", { direction: "up" } );
effect( "#slideLeft", "slide", { direction: "left" } );
effect( "#slideRight", "slide", { direction: "right" } );

$( "#transfer" ).click(function() {
$( this )
.addClass( "current" )
.effect( "transfer", { to: "div:eq(0)" }, 1000, function() {
$( this ).removeClass( "current" );
});
});

$( "#addClass" ).click(function() {
$( this ).addClass( "current", duration, function() {
$( this ).removeClass( "current" );
});
});
$( "#removeClass" ).click(function() {
$( this ).addClass( "current" ).removeClass( "current", duration );
});
$( "#toggleClass" ).click(function() {
$( this ).toggleClass( "current", duration );
});

});
@@ -3,13 +3,12 @@
<head>
<meta charset="utf-8">
<title>jQuery UI Effects Test Suite</title>
<link rel="stylesheet" href="effects.all.css" type="text/css">
<link rel="stylesheet" href="effects.css">
<script src="../../../jquery-1.7.2.js"></script>
<script src="../../../ui/jquery.effects.core.js"></script>
<script src="../../../ui/jquery.effects.scale.js"></script>
<script src="effects.all.js"></script>
<script>
jQuery(function( $ ) {
$(function() {
var test = $( "#testBox" ),
opts = $( ".arg" ),
optsRev = $( opts.get().reverse() ),
@@ -82,9 +81,8 @@
}
});
</script>
<style type="text/css">
<style>
#testArea {
/* border: 5px dashed #777;*/
width: 200px;
height: 200px;
position: relative;

0 comments on commit 44a086b

Please sign in to comment.
You can’t perform that action at this time.