Skip to content
Permalink
Browse files

Effects: Style updates

Ref #14246
Ref gh-1588
  • Loading branch information
arschmitz committed Aug 21, 2015
1 parent 009850a commit de242d8ca9bf2b90237c413cb91601541798bae9
@@ -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;
@@ -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 )
@@ -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();
});
@@ -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();
});
@@ -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();
});
@@ -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 );

0 comments on commit de242d8

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