#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
- .ui-effects-transfer { border: 2px dotted gray; }
</style>
<script src="../../external/requirejs/require.js"></script>
<script src="../bootstrap.js" data-modules="effects-all">
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
- } else if ( selectedEffect === "transfer" ) {
- options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
- <option value="transfer">Transfer</option>
</select>
<button id="button" class="ui-state-default ui-corner-all">Run Effect</button>
effect( "#slideLeft", "slide", { direction: "left" } );
effect( "#slideRight", "slide", { direction: "right" } );
-$( "#transfer" ).on( "click", function() {
- $( this )
- .addClass( "current" )
- .effect( "transfer", { to: $( "div" ).eq( 0 ) }, 1000, function() {
- $( this ).removeClass( "current" );
- } );
-} );
-
$( "#addClass" ).on( "click", function() {
$( this ).addClass( "current", duration, function() {
$( this ).removeClass( "current" );