JQuery初体验(Demo)
程序员文章站
2022-05-01 11:02:54
...
Demo:Show
<meta content="text/html; charset=utf-8">
<script src="js/jquery-1.4.4.js"></script>
<script src="js/ui/jquery.effects.core.js"></script>
<script src="js/ui/jquery.effects.clip.js"></script>
<style>
.toggler { width: 800px; height: 200px; }
#effect { width: 800px; height: 100px; left:100px; padding: 0em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect(id) {
// get effect type from
var selectedEffect = id;
// run the effect
$( "#effect" ).show( selectedEffect, 1000 );
};
$( "#effect" ).hide();
runEffect('clip');
});
</script>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Show</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
这段代码是渐出的效果: