動畫jQuery不寫正確的CSS屬性

Question

我知道可能我有錯誤的東西！但是什麼？

$(".page-splash-page").bind("mousewheel DOMMouseScroll", function(){ 
    $(this).animate({ 
     -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     -moz-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
      }, 1000, function() { 
       { window.location.href = "http:..../work/"; } 
      }); 
    }); 
$(".page-splash-page").on("click touchstart", function() { 
    $(this).animate({ 
     -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     -moz-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
      }, 1000, function() { 
       { window.location.href = "http:...../work/"; } 
      }); 
    }); 
$(".page-splash-page").on("touchmove", function() { 
    $(this).animate({ 
     -webkit-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     -moz-animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
     animation: slide-out-top 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both, 
      }, 1000, function() { 
       { window.location.href = "http:..../work/"; } 
      }); 
    }); 

對不起，我希望這個功能可以工作，但我不是那麼專業的js或jQuery！ 有些可以幫助我！謝謝！

Answer 1

那麼首先你要混合jQuery動畫和CSS動畫。

我在這裏添加了一個簡單的筆，它可以點擊-500px來爲頁面上的飛濺頁添加動畫。希望這可以幫助你開始：

http://codepen.io/anon/pen/MpOabq

$(".page-splash-page").on("click", function() { 
$(this).animate({ 
    top:'-500px', 
     }, 1000, function() { 
      { window.location.href = 'http://www.google.com' } 
     }); 
});