动画效果
fade
scale-up
scale-down
slide-top
slide-bottom
slide-left
slide-right
slide-top-fixed
shake
spin
left-spring
right-spring
<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
<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>
页面滚动动画






按钮

按钮 <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>