Home
Programming
JavaScript
jQuery
UI effects cheet sheet
Editable Text
Insert Tag
Music
Metal
Slayer
Thrash
Japanese
jQuery UI - Effects cheat sheet
blind
blind-test
$("#but-blind").toggle( function() { $("#blind").hide("blind", { direction: "vertical" }, 1000); }, function() { $("#blind").show("blind", { direction: "horizontal" }, 500); } );
clip
clip-test
$("#but-clip").toggle( function() { $("#clip").hide("clip", { direction: "vertical" }, 1000); }, function() { $("#clip").show("clip", { direction: "horizontal" }, 500); } );
drop
drop-test
$("#but-drop").toggle( function() { $("#drop").hide("drop", { direction: "right" }, 1000); }, function() { $("#drop").show("drop", { direction: "down" }, 500); } );
explode
explode-test
$("#but-explode").toggle( function() { $("#explode").hide("explode", {}, 1000); }, function() { $("#explode").show("explode", { pieces: 30 }, 500); } );
fold
fold-test
$("#but-fold").toggle( function() { $("#fold").hide("fold", {}, 1000); }, function() { $("#fold").show("fold", {}, 500); } );
puff
puff-test
$("#but-puff").toggle( function() { $("#puff").hide("puff", {}, 1000); }, function() { $("#puff").show("puff", {}, 500); } );
slide
slide-test
$("#but-slide").toggle( function() { $("#slide").hide("slide", { direction: "right" }, 1000); }, function() { $("#slide").show("slide", direction: "down" {}, 500); } );
scale - pattern1
scale-test
$("#but-scale").toggle( function() { $("#scale").effect("scale", { percent: 50 }, 1000); }, function() { $("#scale").effect("scale", { percent: 200 }, 500); } );
scale - pattern2
scale2-test
$("#but-scale2").toggle( function() { $("#scale2").hide("scale", {}, 1000); }, function() { $("#scale2").show("scale", { percent: 100 }, 500); } );
scale - pattern3
scale3-test
$("#but-scale3").toggle( function() { $("#scale3").effect("scale", { percent: 200, direction: "horizontal" }, 1000); }, function() { $("#scale3").effect("scale", { percent: 50, direction: "horizontal" }, 500); } );
pulsate
pulsate-test
$("#but-pulsate").toggle( function() { $("#pulsate").effect("pulsate", { times: 1 }, 1000); }, function() { $("#pulsate").effect("pulsate", { times: 4 }, 100); } );
bounce
bounce-test
$("#but-bounce").toggle( function() { $("#bounce").effect("bounce", { times: 2 }, 1000); }, function() { $("#bounce").effect("bounce", { times: 4 }, 100); } );
highlight
highlight-test
$("#but-highlight").toggle( function() { $("#highlight").effect("highlight", {}, 1000); }, function() { $("#highlight").effect("highlight", {}, 100); } );
shake
shake-test
$("#but-shake").toggle( function() { $("#shake").effect("shake", { times: 2 }, 200); }, function() { $("#shake").effect("shake", { times: 4 }, 100); } );
transfer
transfer-test
$("#but-transfer").toggle( function() { $("#transfer").effect("transfer", { to: "#transfer-to" }, 1000); }, function() { $("#transfer-to").effect("transfer", { to: "#transfer" }, 500); } );
When you use the effect of transfer, you shouldn't forget to define this style.
.ui-effects-transfer { background-color: #cfd4e6; }
© 2010 - JN -
jyun16@gmail.com
[PR]
外貨 預金
