Skip to content

Commit b6bec79

Browse files
mikesherovmikesherov
committed
Effects: Rewrite
1. Introduces a set of helper methods to easily create and define new effects. 2. Uses clip animations and placeholders instead of wrappers for clip effects. 3. Ensures all animations are detectable as animated Fixes #10599 Fixes #9477 Fixes #9257 Fixes #9066 Fixes #8867 Fixes #8671 Fixes #8505 Fixes #7885 Fixes #7041 Closes jquerygh-1017
1 parent 2a99bb7 commit b6bec79

31 files changed

+921
-806
lines changed

‎demos/effect/addClass.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<style>
1111
.toggler { width: 500px; height: 200px; position: relative; }
1212
#button { padding: .5em 1em; text-decoration: none; }
13-
#effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; }
14-
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
13+
#effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; }
14+
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 120px; padding: 30px; margin: 10px; font-size: 1.1em; }
1515
</style>
1616
<script>
1717
$(function() {

‎demos/effect/animate.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<style>
1111
.toggler { width: 500px; height: 200px; position: relative; }
1212
#button { padding: .5em 1em; text-decoration: none; }
13-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
13+
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
1414
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
1515
</style>
1616
<script>

‎demos/effect/default.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<style>
2626
.toggler { width: 500px; height: 200px; position: relative; }
2727
#button { padding: .5em 1em; text-decoration: none; }
28-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
28+
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
2929
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
3030
.ui-effects-transfer { border: 2px dotted gray; }
3131
</style>
@@ -40,7 +40,7 @@
4040
var options = {};
4141
// some effects have required parameters
4242
if ( selectedEffect === "scale" ) {
43-
options = { percent: 0 };
43+
options = { percent: 50 };
4444
} else if ( selectedEffect === "transfer" ) {
4545
options = { to: "#button", className: "ui-effects-transfer" };
4646
} else if ( selectedEffect === "size" ) {

‎demos/effect/hide.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../ui/effect-clip.js"></script>
1212
<script src="../../ui/effect-drop.js"></script>
1313
<script src="../../ui/effect-explode.js"></script>
14+
<script src="../../ui/effect-fade.js"></script>
1415
<script src="../../ui/effect-fold.js"></script>
1516
<script src="../../ui/effect-highlight.js"></script>
1617
<script src="../../ui/effect-puff.js"></script>
@@ -23,7 +24,7 @@
2324
<style>
2425
.toggler { width: 500px; height: 200px; }
2526
#button { padding: .5em 1em; text-decoration: none; }
26-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
27+
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
2728
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
2829
</style>
2930
<script>
@@ -37,7 +38,7 @@
3738
var options = {};
3839
// some effects have required parameters
3940
if ( selectedEffect === "scale" ) {
40-
options = { percent: 0 };
41+
options = { percent: 50 };
4142
} else if ( selectedEffect === "size" ) {
4243
options = { to: { width: 200, height: 60 } };
4344
}
@@ -77,6 +78,7 @@ <h3 class="ui-widget-header ui-corner-all">Hide</h3>
7778
<option value="clip">Clip</option>
7879
<option value="drop">Drop</option>
7980
<option value="explode">Explode</option>
81+
<option value="fade">Fade</option>
8082
<option value="fold">Fold</option>
8183
<option value="highlight">Highlight</option>
8284
<option value="puff">Puff</option>

‎demos/effect/show.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../ui/effect-clip.js"></script>
1212
<script src="../../ui/effect-drop.js"></script>
1313
<script src="../../ui/effect-explode.js"></script>
14+
<script src="../../ui/effect-fade.js"></script>
1415
<script src="../../ui/effect-fold.js"></script>
1516
<script src="../../ui/effect-highlight.js"></script>
1617
<script src="../../ui/effect-puff.js"></script>
@@ -23,7 +24,7 @@
2324
<style>
2425
.toggler { width: 500px; height: 200px; }
2526
#button { padding: .5em 1em; text-decoration: none; }
26-
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
27+
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
2728
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
2829
</style>
2930
<script>
@@ -37,7 +38,7 @@
3738
var options = {};
3839
// some effects have required parameters
3940
if ( selectedEffect === "scale" ) {
40-
options = { percent: 100 };
41+
options = { percent: 50 };
4142
} else if ( selectedEffect === "size" ) {
4243
options = { to: { width: 280, height: 185 } };
4344
}
@@ -79,6 +80,7 @@ <h3 class="ui-widget-header ui-corner-all">Show</h3>
7980
<option value="clip">Clip</option>
8081
<option value="drop">Drop</option>
8182
<option value="explode">Explode</option>
83+
<option value="fade">Fade</option>
8284
<option value="fold">Fold</option>
8385
<option value="highlight">Highlight</option>
8486
<option value="puff">Puff</option>

‎demos/effect/switchClass.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
.toggler { width: 500px; height: 200px; position: relative; }
1212
#button { padding: .5em 1em; text-decoration: none; }
1313
#effect { position: relative; }
14-
.newClass { width: 240px; padding: 1em; letter-spacing: 0; font-size: 1.2em; margin: 0; }
15-
.anotherNewClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; }
14+
.newClass { width: 240px; padding: 1em; letter-spacing: 0; margin: 0; }
15+
.anotherNewClass { text-indent: 40px; letter-spacing: .2em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.1em; }
1616
</style>
1717
<script>
1818
$(function() {

‎demos/effect/toggle.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<script src="../../ui/effect-clip.js"></script>
1212
<script src="../../ui/effect-drop.js"></script>
1313
<script src="../../ui/effect-explode.js"></script>
14+
<script src="../../ui/effect-fade.js"></script>
1415
<script src="../../ui/effect-fold.js"></script>
1516
<script src="../../ui/effect-highlight.js"></script>
1617
<script src="../../ui/effect-puff.js"></script>
@@ -32,7 +33,7 @@
3233
#effect {
3334
position: relative;
3435
width: 240px;
35-
height: 135px;
36+
height: 170px;
3637
padding: 0.4em;
3738
}
3839
#effect h3 {
@@ -52,7 +53,7 @@
5253
var options = {};
5354
// some effects have required parameters
5455
if ( selectedEffect === "scale" ) {
55-
options = { percent: 0 };
56+
options = { percent: 50 };
5657
} else if ( selectedEffect === "size" ) {
5758
options = { to: { width: 200, height: 60 } };
5859
}
@@ -85,6 +86,7 @@ <h3 class="ui-widget-header ui-corner-all">Toggle</h3>
8586
<option value="clip">Clip</option>
8687
<option value="drop">Drop</option>
8788
<option value="explode">Explode</option>
89+
<option value="fade">Fade</option>
8890
<option value="fold">Fold</option>
8991
<option value="highlight">Highlight</option>
9092
<option value="puff">Puff</option>

‎tests/unit/effects/effects.html

+35-16
Original file line numberDiff line numberDiff line change
@@ -88,28 +88,47 @@
8888
width: 100px;
8989
}
9090

91+
.relative {
92+
position: relative;
93+
top: 0px;
94+
left: 0px;
95+
}
96+
.absolute {
97+
position: absolute;
98+
top: 0px;
99+
left: 0px;
100+
}
101+
.fixed {
102+
position: fixed;
103+
top: 0px;
104+
left: 0px;
105+
}
106+
.static {
107+
position: static;
108+
}
109+
91110
</style>
92111
</head>
93112
<body>
94113

95114
<div id="qunit"></div>
96115
<div id="qunit-fixture">
97-
<div id="elem" class="test">
98-
</div>
99-
<div class="hidden test">
100-
<div>.</div>
101-
</div>
102-
<div class="animateClass test">
103-
<h2>Child Element Test</h2>
104-
</div>
105-
<div class="relWidth relHeight testAddBorder">
106-
<h2>Slide with relative width</h2>
107-
</div>
108-
<div class="testScale">
109-
</div>
110-
<div class="ticket7106">
111-
</div>
112-
116+
<div id="elem" class="test"></div>
117+
<div class="hidden test">
118+
<div>.</div>
119+
</div>
120+
<div class="animateClass test">
121+
<h2>Child Element Test</h2>
122+
</div>
123+
<div class="relWidth relHeight testAddBorder">
124+
<h2>Slide with relative width</h2>
125+
</div>
126+
<div class="testScale"></div>
127+
<div class="ticket7106"></div>
128+
<div class="relative"></div>
129+
<div class="absolute"></div>
130+
<div class="fixed"></div>
131+
<div class="static"></div>
113132
</div>
114133
</body>
115134
</html>

‎tests/unit/effects/effects_core.js

+75-25
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
(function($) {
22

33
function present( value, array, message ) {
4-
QUnit.push( jQuery.inArray( value, array ) !== -1 , value, array, message );
4+
QUnit.push( jQuery.inArray( value, array ) !== -1, value, array, message );
55
}
66

77
function notPresent( value, array, message ) {
8-
QUnit.push( jQuery.inArray( value, array ) === -1 , value, array, message );
8+
QUnit.push( jQuery.inArray( value, array ) === -1, value, array, message );
99
}
1010

1111
// minDuration is used for "short" animate tests where we are only concerned about the final
@@ -75,20 +75,6 @@ test( "removeClass", function() {
7575
equal( "", element[ 0 ].className );
7676
});
7777

78-
79-
/* TODO: Disabled - Can't figure out why this is failing in IE 6/7
80-
test( "createWrapper and removeWrapper retain focused elements (#7595)", function() {
81-
expect( 2 );
82-
var test = $( "div.hidden" ).show(),
83-
input = $( "<input type='text'>" ).appendTo( test ).focus();
84-
85-
$.effects.createWrapper( test );
86-
equal( document.activeElement, input[ 0 ], "Active element is still input after createWrapper" );
87-
$.effects.removeWrapper( test );
88-
equal( document.activeElement, input[ 0 ], "Active element is still input after removeWrapper" );
89-
});
90-
*/
91-
9278
module( "effects.core: animateClass" );
9379

9480
asyncTest( "animateClass works with borderStyle", function() {
@@ -213,6 +199,44 @@ asyncTest( "animateClass: css and class changes during animation are not lost (#
213199
.height( 100 );
214200
});
215201

202+
test( "createPlaceholder: only created for static or relative elements", function() {
203+
expect( 4 );
204+
205+
ok( $.effects.createPlaceholder( $( ".relative" ) ).length, "placeholder created for relative element" );
206+
ok( $.effects.createPlaceholder( $( ".static" ) ).length, "placeholder created for static element" );
207+
ok( !$.effects.createPlaceholder( $( ".absolute" ) ), "placeholder not created for absolute element" );
208+
ok( !$.effects.createPlaceholder( $( ".fixed" ) ), "placeholder not created for fixed element" );
209+
});
210+
211+
test( "createPlaceholder: preserves layout affecting properties", function() {
212+
expect( 7 );
213+
214+
var position = 5,
215+
element = $( ".relative" ).css({
216+
top: position,
217+
left: position
218+
}),
219+
before = {
220+
offset: element.offset(),
221+
outerWidth: element.outerWidth( true ),
222+
outerHeight: element.outerHeight( true ),
223+
"float": element.css( "float" ),
224+
position: element.position()
225+
},
226+
placeholder = $.effects.createPlaceholder( element );
227+
228+
// Placeholders are only placed to preserve the effect on layout. Considering
229+
// top and left do not change layout, they are not preserved, which makes some
230+
// of the math simpler in the implementation.
231+
deepEqual( before.offset.top - position, placeholder.offset().top, "offset top preserved" );
232+
deepEqual( before.offset.left - position, placeholder.offset().left, "offset left preserved" );
233+
deepEqual( before.position.top - position, placeholder.position().top, "position top preserved" );
234+
deepEqual( before.position.left - position, placeholder.position().left, "position left preserved" );
235+
236+
deepEqual( before[ "float" ], placeholder.css( "float" ), "float preserved" );
237+
deepEqual( before.outerWidth, placeholder.outerWidth( true ), "width preserved" );
238+
deepEqual( before.outerHeight, placeholder.outerHeight( true ), "height preserved" );
239+
});
216240

217241
$.each( $.effects.effect, function( effect ) {
218242
module( "effects." + effect );
@@ -223,7 +247,7 @@ $.each( $.effects.effect, function( effect ) {
223247
return;
224248
}
225249
asyncTest( "show/hide", function() {
226-
expect( 8 );
250+
expect( 12 );
227251
var hidden = $( "div.hidden" ),
228252
count = 0,
229253
test = 0;
@@ -242,14 +266,40 @@ $.each( $.effects.effect, function( effect ) {
242266
};
243267
}
244268

245-
hidden.queue( queueTest() ).show( effect, minDuration, queueTest(function() {
246-
equal( hidden.css("display"), "block", "Hidden is shown after .show(\"" +effect+ "\", time)" );
247-
})).queue( queueTest() ).hide( effect, minDuration, queueTest(function() {
248-
equal( hidden.css("display"), "none", "Back to hidden after .hide(\"" +effect+ "\", time)" );
249-
})).queue( queueTest(function() {
250-
deepEqual( hidden.queue(), ["inprogress"], "Only the inprogress sentinel remains");
251-
start();
252-
}));
269+
function duringTest( fn ) {
270+
return function( next ) {
271+
setTimeout( fn );
272+
next();
273+
};
274+
}
275+
276+
hidden
277+
.queue( queueTest() )
278+
.queue( duringTest(function() {
279+
ok( hidden.is( ":animated" ),
280+
"Hidden is seen as animated during .show(\"" + effect + "\", time)" );
281+
}) )
282+
.show( effect, minDuration, queueTest(function() {
283+
equal( hidden.css( "display" ), "block",
284+
"Hidden is shown after .show(\"" + effect + "\", time)" );
285+
ok( !$( ".ui-effects-placeholder" ).length,
286+
"No placeholder remains after .show(\"" + effect + "\", time)" );
287+
}) )
288+
.queue( queueTest() )
289+
.queue( duringTest(function() {
290+
ok( hidden.is( ":animated" ),
291+
"Hidden is seen as animated during .hide(\"" + effect + "\", time)" );
292+
}) )
293+
.hide( effect, minDuration, queueTest(function() {
294+
equal( hidden.css( "display" ), "none",
295+
"Back to hidden after .hide(\"" + effect + "\", time)" );
296+
ok( !$( ".ui-effects-placeholder" ).length,
297+
"No placeholder remains after .hide(\"" + effect + "\", time)" );
298+
}) )
299+
.queue( queueTest(function() {
300+
deepEqual( hidden.queue(), [ "inprogress" ], "Only the inprogress sentinel remains" );
301+
start();
302+
}) );
253303
});
254304

255305
asyncTest( "relative width & height - properties are preserved", function() {

‎tests/unit/effects/effects_scale.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ function run( position, v, h, vo, ho ) {
66
asyncTest( desc, function() {
77
expect( 2 );
88
function complete() {
9-
equal( parseInt( test.css( h ), 10 ), target[ h ], "Horizontal Position Correct " + desc );
10-
equal( parseInt( test.css( v ), 10 ), target[ v ], "Vertical Position Correct " + desc );
9+
closeEnough( parseInt( test.css( h ), 10 ), target[ h ], 1, "Horizontal Position Correct " + desc );
10+
closeEnough( parseInt( test.css( v ), 10 ), target[ v ], 1, "Vertical Position Correct " + desc );
1111
start();
1212
}
1313
var test = $( ".testScale" ),

‎tests/visual/effects/all.html

+2
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@
1414
<script src="../../../ui/effect-fade.js"></script>
1515
<script src="../../../ui/effect-fold.js"></script>
1616
<script src="../../../ui/effect-highlight.js"></script>
17+
<script src="../../../ui/effect-puff.js"></script>
1718
<script src="../../../ui/effect-pulsate.js"></script>
1819
<script src="../../../ui/effect-scale.js"></script>
20+
<script src="../../../ui/effect-size.js"></script>
1921
<script src="../../../ui/effect-shake.js"></script>
2022
<script src="../../../ui/effect-slide.js"></script>
2123
<script src="../../../ui/effect-transfer.js"></script>

‎tests/visual/effects/clip.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
<p>EXPECTED: Clicking "Toggle" or "Effect Toggle" a second time reverses the animation, first showing all elements at their original dimensions, and restoring them to their original state.</p>
7171
<p>EXPECTED: Clicking "Effect Default" should always perform a "hide" animation.</p>
7272
<p>EXPECTED: Clicking any of the buttons in quick succession should queue the relevant animations.</p>
73+
<p>EXPECTED CANTFIX: In IE8, the clip animation jumps due to a bug that causes .css('clip') to return undefined unless the clip property is an inline style.</p>
7374

7475
<div class="container">
7576
<button class="toggle">Toggle</button>
@@ -80,7 +81,7 @@
8081
<p>Jerky corned beef short loin fatback jowl tail. Rump spare ribs shoulder pork belly. Sausage cow ground round bacon. Bresaola kielbasa pastrami brisket ham hock. Andouille kielbasa ham, pork beef tenderloin ground round beef ribs flank turkey pancetta tri-tip.</p>
8182
<div class="column">
8283
<p>Shankle filet mignon ribeye chicken, bacon jowl drumstick frankfurter swine short loin capicola leberkas tenderloin pig. Shankle bacon shank pork loin, shoulder ham drumstick biltong. Shankle ham pastrami ball tip turkey leberkas pork loin ground round. Chicken strip steak venison shoulder biltong ham. Bacon pork loin tenderloin kielbasa, prosciutto sausage leberkas jowl ribeye turducken. Flank short loin venison tenderloin spare ribs boudin, tongue pork chop shank sirloin. Ground round ham pork belly, corned beef jowl strip steak short ribs prosciutto pig bresaola spare ribs.</p>
83-
<img class="target" style="margin: 10px 20px 30px 40px;" src="../../images/jquery_521x191.png" alt="jQuery Logo">
84+
<img class="target margin" src="../../images/jquery_521x191.png" alt="jQuery Logo">
8485
<p>Pork loin biltong ball tip tail jerky beef ribs prosciutto short loin turducken. Turkey chicken jowl pork loin shank tri-tip swine brisket. Doner prosciutto leberkas venison ground round, short loin capicola hamburger pork bacon. Spare ribs beef pork tenderloin rump shoulder pork belly turducken cow beef ribs pastrami tail flank. Spare ribs tri-tip shank, pork beef ribs ribeye chicken bacon boudin shoulder venison. Sirloin beef ribs boudin, andouille doner tail ball tip biltong prosciutto chicken beef turkey tongue hamburger tri-tip.</p>
8586
</div>
8687
<p>Doner salami jowl beef ribs. Pork chop beef short loin pork, kielbasa tail andouille salami sausage meatball short ribs t-bone tri-tip ham. Meatball short ribs prosciutto flank chicken fatback frankfurter brisket turducken. Corned beef hamburger swine short ribs pancetta. Jerky bresaola pork chuck spare ribs pastrami shoulder flank chicken leberkas beef.</p>

0 commit comments

Comments
 (0)