安安，今日的文章是實作練習昨天筆記的語法，能夠讓自己更有印象，如果沒跟上的話可以參考一下昨日的文，那話不多說就直接開始囉！實作效果下面都有codepen可以點進去看:)

基礎練習：1.show/hide 2.fadeIn/fadeOut 3.slideDown/slideUp

// show/hide
$('.btn1').click(function(){
  $('.rect1').show(500)
})
$('.btn1e').click(function(){
  $('.rect1').hide(1000)
})
// fadeIn/fadeOut
$('.btn2').click(function(){
  $('.rect2').fadeIn(500)
})
$('.btn2e').click(function(){
  $('.rect2').fadeOut(1000)
})
// slideDown/slideUp
$('.btn3').click(function(){
  $('.rect3').slideDown(500)
})
$('.btn3e').click(function(){
  $('.rect3').slideUp(1000)
})

這邊是前面基礎三題的效果及程式碼：https://codepen.io/cinj/pen/JjKoQWX?editors=1010

✎練習四：animate

$('.btn4').click(function(){
  $('.rect4').animate({
    left: '200px',
    height: '50px'
  },500)

也可以將500寫成物件方式：

$('.btn4').click(function(){
  $('.rect4').animate({
    left: '200px',
    height: '50px'
  },{
    duration: 500
  })

接下來可以在直接增加新的動畫：

$('.btn4').click(function(){
  $('.rect4').animate({
    left: '200px',
    height: '50px'
  },{
    duration: 500
  })
// 新增新的動畫，讓他再往右移300px
  .animate({
    left: '300px'
  })
})

但是假使說希望不斷往右的話，就要設400px,500px,600px，就會變很麻煩，這時候就能使用+= 相對的位子來做計算：

.animate({
    left: '+=100px'
  })
.animate({
    left: '+=100px'
  })
.animate({
    left: '+=100px'
  })

可在codepen看這個效果：https://codepen.io/cinj/pen/gOMbyzN?editors=0010

➤也能在動畫裡面再加上背景顏色(但要記得引入jquery-color，才會有效果)：

.animate({
    left: '+=100px',
    backgroundColor: 'red'
  })

可在codepen看這個效果：https://codepen.io/cinj/pen/yLJyrGb?editors=0010

➤承上題，再加入一個function，動畫完顯示出文字：

.animate({
    left: '+=100px',
    backgroundColor: 'red'
  },{
    duration: 500,
    complete: function(){
     console.log("i'm red")
     $('.rect4').text('載入完畢')
    }
  })

➤將它變成球，然後更改速度曲線（速度曲線可參考上篇網址）

.animate({
    left: '0px'
  },2000,'easeOutBounce')

可在codepen看這個效果：https://codepen.io/cinj/pen/WNxbWPx?editors=0010

➤結合velocity的運用：讓transform可用,練習旋轉+反轉reverse

// velocity用法
// $('.btn5').click(function(){
//   $('.rect5').velocity({
//     translateX: '30px',
//     rotateZ: '45deg'
//   })
// })
// 上面轉下面程式碼：有設定初始值,使用陣列[目標值,初始值]
$('.btn5').click(function(){
  $('.rect5').velocity({
    translateX: '30px',
    rotateZ: ['45deg','120deg']
  })
  // ,{
  //   loop: 3,  //給true是不斷重播直到你按停止
  //   delay: 500
  // }
})
// reverse反轉
$('.btn5e').click(function(){
  $('.rect5').velocity('reverse')})

可在codepen看這個效果：https://codepen.io/cinj/pen/ExyaBjY?editors=1010

那Jquery複習日就到今天告一段落了，在這段複習期間學習到不少新的知識，也希望對新手有一些幫助!!!~感謝收看