jQuery动画1
.hide() /?.show() /?.toggle
【例1】不傳參數，代碼效果
代碼
<style>.wrapper {width: 300px;height: auto;border: 2px solid #424242;border-radius: 25px;overflow: hidden;background: linear-gradient(to right, darkcyan, steelblue);color: #fff;}.wrapper .title {width: 300px;height: 30px;line-height: 30px;text-align: center;}.demo {display: none;padding: 10px;text-indent: 20px;}</style> </head><body><div class="wrapper"><div class="title">桃花扇</div><div class="demo">普通人的一生，再好些也是“桃花扇”，撞破了頭，血濺到扇子上。就這上面略加點染成為一枝桃花</div></div> </body>方法一：用hide和show實現
<script src="./jquery.js"></script> <script>$('.wrapper').click(function () {if ($('.demo').css('display') == 'none') {$('.demo').show();} else {$('.demo').hide() }}) </script>方法二：用toggle實現
$('.wrapper').click(function () {$('.demo').toggle(); })【例2】傳參數：duration+easing，效果如下
可以看出其寬高和透明度同時在改變，代碼如下
$('.wrapper').click(function () {if ($('.demo').css('display') == 'none') {$('.demo').show(1000,'swing');} else {$('.demo').hide(1000,'linear') } })fadeIn / fadeOut?/ fadeTo / fadeToggle
【例1】fadeIn和fadeOut實現下列效果
可看出，只有透明度在變化，代碼如下
方法一：用fadeIn和fadeOut實現
$('.wrapper').click(function () {if ($('.demo').css('display') == 'none') {$('.demo').fadeIn();} else {$('.demo').fadeOut() } })方法二：用fadeToggle實現
$('.wrapper').click(function () {$('.demo').fadeToggle(); })【例2】傳參：duration+easing（也可傳callback，此處不傳），代碼效果如下
代碼
$('.wrapper').click(function () {if ($('.demo').css('display') == 'none') {$('.demo').fadeIn(1000, 'swing');} else {$('.demo').fadeOut(1000, 'linear'); } })【例3】fadeTo實現下列效果（傳參：duration，opacity，easing，callback）
代碼
var text = $('.demo').text(); $('.wrapper').click(function () {if ($('.demo').css('display') == 'none') {$('.demo').fadeTo(1000, 1, 'swing', function () {$('.demo').text('over');});} else {$('.demo').fadeTo(1000, 0.5, 'linear', function () {$('.demo').text(text);console.log(text);});} })由代碼和效果圖可知，當透明度變為0.5后，再不觸發條件為真內的函數，因為display不是none了
【注】動畫效果可改變display屬性值，在none和默認值兩者中進行切換
slideDown / slideUp / slideToggle
【例】實現如下效果
由圖可知，只改變了高度，代碼如下
方法一
$('.wrapper').click(function () {if ($('.demo').css('display') == 'none') {$('.demo').slideDown(1000,'swing');} else {$('.demo').slideUp(1000,'linear') } })【注】其傳參同上?
方法二：
$('.wrapper').click(function () {$('.demo').slideToggle(1000, 'linear'); })【注】easing不同?
下篇介紹animate/stop/finish
總結
- 上一篇： jQuery事件4——hover
- 下一篇： jQuery动画2