library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Effects: Style updates

Browse Source 
Ref #14246
Ref gh-1588
This commit is contained in:
Alexander Schmitz 2015-08-21 00:12:17 -04:00
parent 009850abbf
commit de242d8ca9
9 changed files with 226 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demos/effect/default.html
View File

@ -19,7 +19,7 @@
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
@ -30,18 +30,18 @@
options = { to: { width: 200, height: 60 } };
}
// run the effect
// Run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// callback function to bring a hidden box back
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// set effect from select menu value
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
return false;

10
demos/effect/easing.html
View File

@ -37,7 +37,7 @@
ctx = canvas.getContext( "2d" );
ctx.fillStyle = "black";
// draw background
// Draw background
ctx.beginPath();
ctx.moveTo( cradius, 0 );
ctx.quadraticCurveTo( 0, 0, 0, cradius );
@ -49,21 +49,21 @@
ctx.lineTo( cradius, 0 );
ctx.fill();
// draw bottom line
// Draw bottom line
ctx.strokeStyle = "#555";
ctx.beginPath();
ctx.moveTo( width * 0.1, drawHeight + .5 );
ctx.lineTo( width * 0.9, drawHeight + .5 );
ctx.stroke();
// draw top line
// Draw top line
ctx.strokeStyle = "#555";
ctx.beginPath();
ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
ctx.stroke();
// plot easing
// Plot easing
ctx.strokeStyle = "white";
ctx.beginPath();
ctx.lineWidth = 2;
@ -76,7 +76,7 @@
});
ctx.stroke();
// animate on click
// Animate on click
graph.on( "click", function() {
wrap
.animate( { height: "hide" }, 2000, name )

8
demos/effect/hide.html
View File

@ -18,7 +18,7 @@
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
@ -27,18 +27,18 @@
options = { to: { width: 200, height: 60 } };
}
// run the effect
// Run the effect
$( "#effect" ).hide( selectedEffect, options, 1000, callback );
};
// callback function to bring a hidden box back
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// set effect from select menu value
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
});

6
demos/effect/show.html
View File

@ -18,7 +18,7 @@
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
@ -27,7 +27,7 @@
options = { to: { width: 280, height: 185 } };
}
// run the effect
// Run the effect
$( "#effect" ).show( selectedEffect, options, 500, callback );
};
@ -38,7 +38,7 @@
}, 1000 );
};
// set effect from select menu value
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
});

6
demos/effect/toggle.html
View File

@ -33,7 +33,7 @@
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
@ -42,11 +42,11 @@
options = { to: { width: 200, height: 60 } };
}
// run the effect
// Run the effect
$( "#effect" ).toggle( selectedEffect, options, 500 );
};
// set effect from select menu value
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
});

10
tests/unit/effects/core.js
View File

@ -30,7 +30,7 @@ function notPresent( value, array, message ) {
// minDuration is used for "short" animate tests where we are only concerned about the final
var minDuration = 15,
// duration is used for "long" animates where we plan on testing properties during animation
// Duration is used for "long" animates where we plan on testing properties during animation
duration = 200;
module( "effects.core" );
@ -115,11 +115,11 @@ asyncTest( "animateClass works with colors", function() {
expect(2);
// we want to catch the first frame of animation
// We want to catch the first frame of animation
jQuery.fx.step.backgroundColor = function( fx ) {
oldStep.apply( this, arguments );
// make sure it has animated somewhere we can detect
// Make sure it has animated somewhere we can detect
if ( fx.pos > 255 / 2000 ) {
jQuery.fx.step.backgroundColor = oldStep;
notPresent( test.css("backgroundColor"),
@ -206,14 +206,14 @@ function( assert ) {
expect( 2 );
var test = $( "div.ticket7106" );
// ensure the class stays and that the css property stays
// Ensure the class stays and that the css property stays
function animationComplete() {
assert.hasClasses( test, "testClass", "class change during animateClass was not lost" );
equal( test.height(), 100, "css change during animateClass was not lost" );
start();
}
// add a class and change a style property after starting an animated class
// Add a class and change a style property after starting an animated class
test.addClass( "animate", minDuration, animationComplete )
.addClass( "testClass" )
.height( 100 );

363
ui/effect.js
View File

File diff suppressed because it is too large Load Diff

13
ui/effects/effect-bounce.js
View File

@ -33,7 +33,7 @@ return $.effects.define( "bounce", function( options, done ) {
var upAnim, downAnim, refValue,
element = $( this ),
// defaults:
// Defaults:
mode = options.mode,
hide = mode === "hide",
show = mode === "show",
@ -41,12 +41,12 @@ return $.effects.define( "bounce", function( options, done ) {
distance = options.distance,
times = options.times || 5,
// number of internal animations
// Number of internal animations
anims = times * 2 + ( show || hide ? 1 : 0 ),
speed = options.duration / anims,
easing = options.easing,
// utility:
// Utility:
ref = ( direction === "up" || direction === "down" ) ? "top" : "left",
motion = ( direction === "up" || direction === "left" ),
i = 0,
@ -57,7 +57,7 @@ return $.effects.define( "bounce", function( options, done ) {
refValue = element.css( ref );
// default distance for the BIGGEST bounce is the outer Distance / 3
// Default distance for the BIGGEST bounce is the outer Distance / 3
if ( !distance ) {
distance = element[ ref === "top" ? "outerHeight" : "outerWidth" ]() / 3;
}
@ -66,7 +66,7 @@ return $.effects.define( "bounce", function( options, done ) {
downAnim = { opacity: 1 };
downAnim[ ref ] = refValue;
// if we are showing, force opacity 0 and set the initial position
// If we are showing, force opacity 0 and set the initial position
// then do the "first" animation
element
.css( "opacity", 0 )
@ -74,13 +74,14 @@ return $.effects.define( "bounce", function( options, done ) {
.animate( downAnim, speed, easing );
}
// start at the smallest distance if we are hiding
// Start at the smallest distance if we are hiding
if ( hide ) {
distance = distance / Math.pow( 2, times - 1 );
}
downAnim = {};
downAnim[ ref ] = refValue;
// Bounces up/down/left/right then back to 0 -- times * 2 animations happen here
for ( ; i < times; i++ ) {
upAnim = {};

10
ui/effects/effect-explode.js
View File

@ -38,15 +38,15 @@ return $.effects.define( "explode", "hide", function( options, done ) {
mode = options.mode,
show = mode === "show",
// show and then visibility:hidden the element before calculating offset
// Show and then visibility:hidden the element before calculating offset
offset = element.show().css( "visibility", "hidden" ).offset(),
// width and height of a piece
// Width and height of a piece
width = Math.ceil( element.outerWidth() / cells ),
height = Math.ceil( element.outerHeight() / rows ),
pieces = [];
// children animate complete:
// Children animate complete:
function childComplete() {
pieces.push( this );
if ( pieces.length === rows * cells ) {
@ -54,7 +54,7 @@ return $.effects.define( "explode", "hide", function( options, done ) {
}
}
// clone the element for each row and cell.
// Clone the element for each row and cell.
for ( i = 0; i < rows; i++ ) { // ===>
top = offset.top + i * height;
my = i - ( rows - 1 ) / 2;
@ -76,7 +76,7 @@ return $.effects.define( "explode", "hide", function( options, done ) {
top: -i * height
} )
// select the wrapper - make it overflow: hidden and absolute positioned based on
// Select the wrapper - make it overflow: hidden and absolute positioned based on
// where the original was located +left and +top equal to the size of pieces
.parent()
.addClass( "ui-effects-explode" )