如果你想要創建一個從左到右的動畫效果,jQuery提供了一種簡單而有效的方法。這種方法使用了CSS屬性和動畫函數的組合來實現動畫效果。
$('div').animate({ 'left': '100px' }, 1000);
上面的代碼使用了animate函數來設置一個從左到右的動畫效果。其中,動畫的目標是div標簽,屬性為left,值為100px,動畫的時間為1秒。
如果你想要動畫效果更加平滑,你可以使用一個easing函數。下面是一個例子:
$('div').animate({ 'left': '100px' }, { duration: 1000, easing: 'easeOutBounce' });
上面的代碼中,easing函數是'easeOutBounce'。這個函數可以讓動畫更加平滑,且最后的停頓效果更好。
最后,如果你想要設置一個循環動畫效果,你可以使用下面的代碼:
$('div').animate({ 'left': '100px' }, { duration: 1000, easing: 'easeOutBounce', complete: function() { $(this).animate({'left': '0px'}, 1000); }, queue: true });
通過使用complete函數,動畫效果可以無限循環。queue屬性也可以設置為true,使得所有動畫效果都排成隊列。
上一篇div 邊距
下一篇discuz div文件