快捷導(dǎo)航

jQuery通過擴(kuò)展實(shí)現(xiàn)抖動(dòng)效果的方法

更新時(shí)間：2015年03月11日 16:41:37 作者：小編輯

這篇文章主要介紹了jQuery通過擴(kuò)展實(shí)現(xiàn)抖動(dòng)效果的方法,涉及jQuery擴(kuò)展的技巧及抖動(dòng)特效的實(shí)現(xiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery通過擴(kuò)展實(shí)現(xiàn)抖動(dòng)效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

1. JavaScript代碼如下：

復(fù)制代碼代碼如下:

jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {

    this.each(function() {

        var jqNode = $(this);

        jqNode.css({position: ‘relative'});

        for (var x=1; x<=intShakes; x++) {

            jqNode.animate({ left: (intDistance * -1) },(((intDuration / intShakes) / 4)))

            .animate({ left: intDistance },((intDuration/intShakes)/2))

            .animate({ left: 0 },(((intDuration/intShakes)/4)));

        }

    });

    return this;

}

2. 使用方法如下：

復(fù)制代碼代碼如下:

$(function() {

  $('#btn').click(function() {

    $(this).shake(2,10,400);

  });

});

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery獲取this當(dāng)前對象子元素對象的方法
下面小編就為大家?guī)硪黄猨Query獲取this當(dāng)前對象子元素對象的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
使用CSS和jQuery模擬select并附提交后取得數(shù)據(jù)的代碼
使用CSS和jQuery模擬select并實(shí)現(xiàn)提交后取得數(shù)據(jù)，詳細(xì)實(shí)現(xiàn)及截圖如下，感興趣的朋友可以參考下
2013-10-10
關(guān)于Jqzoom的使用心得 jquery放大鏡效果插件
Jqzoom是基于jquery的放大鏡效果插件，兼容多款瀏覽器，喜歡的朋友可以測試下。
2010-04-04
Jquery對select的增、刪、改、查操作
這篇文章主要介紹了Jquery對select的增、刪、改、查操作的方法,需要的朋友可以參考下
2015-02-02
jQuery實(shí)現(xiàn)的簡單拖動(dòng)層示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單拖動(dòng)層,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)拖動(dòng)div層及動(dòng)態(tài)顯示坐標(biāo)值的功能,涉及jQuery鼠標(biāo)響應(yīng)及頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下
2017-02-02
jquery 無限級下拉菜單的簡單實(shí)現(xiàn)代碼
本篇文章主要是對jquery 無限級下拉菜單的簡單實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
基于jQuery UI CSS Framework開發(fā)Widget的經(jīng)驗(yàn)
jQuery UI CSS Framework是jQuery UI中的一個(gè)樣式框架，可以利用jQuery Theme roller 來生成自己想要的css樣式效果。我們可以利用jQuery UI的一些框架來開發(fā)出基于jQuery UI CSS Framework效果的插件來。
2010-08-08
jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)
下面小編就為大家?guī)硪黄猨Query中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊下拉框中的值累加到文本框中的方法,涉及jQuery事件綁定及頁面元素屬性動(dòng)態(tài)獲取與操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-10-10
基于jQuery實(shí)現(xiàn)的設(shè)置文本區(qū)域的光標(biāo)位置
之前做一個(gè)代碼提示的功能涉及到在文本框中插入文本的操作,需要獲得當(dāng)前光標(biāo)位置插入文本,本文章向大家介紹jQuery如何設(shè)置文本區(qū)域的光標(biāo)位置，需要的朋友可以參考一下
2018-06-06