动画效果
fade
scale-up
scale-down
slide-top
slide-bottom
slide-left
slide-right
slide-top-fixed
shake
spin
left-spring
right-spring
<![CDATA[
<div class="line line-left"><span>动画效果</span></div>
<div class="btn" data-name="ui-am-fade">fade</div>
<div class="btn" data-name="ui-am-scale-up">scale-up</div>
<div class="btn" data-name="ui-am-scale-down">scale-down</div>
<div class="btn" data-name="ui-am-slide-top">slide-top</div>
<div class="btn" data-name="ui-am-slide-bottom">slide-bottom</div>
<div class="btn" data-name="ui-am-slide-left">slide-left</div>
<div class="btn" data-name="ui-am-slide-right">slide-right</div>
<div class="btn" data-name="ui-am-slide-top-fixed">slide-top-fixed</div>
<div class="btn" data-name="ui-am-shake">shake</div>
<div class="btn" data-name="ui-am-spin">spin</div>
<div class="btn" data-name="ui-am-left-spring">left-spring</div>
<div class="btn" data-name="ui-am-right-spring">right-spring</div>
<script>
$(function()
{
$(".btn").click(function()
{
var name=$(this).attr("data-name");
$(this).addClass(name);
});
})
</script>
]]>
动画延迟效果
scale-up
slide-top
slide-bottom
slide-left
slide-right
slide-top-fixed
<![CDATA[
<div class="btn ui-am-scale-up ui-am-delay-1">scale-up</div>
<div class="btn ui-am-slide-top ui-am-delay-1-5">slide-top</div>
<div class="btn ui-am-slide-bottom ui-am-delay-2">slide-bottom</div>
<div class="btn ui-am-slide-left ui-am-delay-2-5">slide-left</div>
<div class="btn ui-am-slide-right ui-am-delay-3">slide-right</div>
<div class="btn ui-am-slide-top-fixed ui-am-delay-3-5">slide-top-fixed</div>
]]>
页面滚动动画
按钮
按钮
<![CDATA[
<a class="btn scrollspy" data-am="ui-am-scale-up" data-time="500" data-loop="true">按钮</a><br><br>
<a class="btn btn-blue scrollspy" data-am="ui-am-scale-up" data-time="1000" data-loop="true">按钮</a>
]]>