2013-03-10 78 views
0

我已經成功地獲得了這個工作,但我在網站上有很多按鈕,我想脈衝,目前我正在用id做這個,但我想移動到更靈活的東西並使用一個班級來選擇哪些按鈕應該脈動。這是一個JSFiddle脈衝按鈕HTML,jQuery,jQueryUI

我看到的問題,至少在我的瀏覽器(Mac上的谷歌瀏覽器25.0)是按鈕按預期脈衝,但脈衝輸出緩慢,然後下一個脈衝需要幾秒鐘就可以觸發,然後下一次更改需要更長的時間,它似乎陷入了某種程度。這裏是動畫腳本:

function pulseIn() { 
    $(".pulse").animate({ 
     backgroundColor: "rgba(144,238,144,0.5)" 
    }, 1000, 'swing', function() { 
     pulseOut(); 
    }); 
} 

function pulseOut() { 
    $(".pulse").animate({ 
     backgroundColor: "rgba(0,0,0,0.5)" 
    }, 1000, 'swing', function() { 
     pulseIn(); 
    }); 
} 

pulseIn(); 

回答

1

我已經爲你updated your code。這應該通過一個特定的控制脈衝和脈衝輸出。在你的代碼中,一旦第一個控件完成脈衝輸入,你執行了pulseOut,它選擇了包括第二個控件在內的所有.pulse,即使它還沒有完成運行它的pulseIn(有點混淆解釋,但希望你能獲得主要內容)。

$('.pulse').each(function(){ 
    pulseIn($(this)); 
}); 

function pulseIn(control) { 
    control.animate({ 
     backgroundColor: "rgba(144,238,144,0.5)" 
    }, 1000, 'swing', function() { 
     pulseOut(control); 
    }); 
} 

function pulseOut(control) { 
    control.animate({ 
     backgroundColor: "rgba(0,0,0,0.5)" 
    }, 1000, 'swing', function() { 
     pulseIn(control); 
    }); 
} 
+0

真棒!非常感謝你,從來沒有想過這樣做 – SnareChops 2013-03-11 01:16:56

0

我寫了一個小片段,可以不使用jQuery UI - 只使用jQuery。

function fadeBtn(el, fadeOutSpeed, fadeInSpeed){ 
    el.fadeOut(fadeOutSpeed, function(){ 
     jQuery(this).fadeIn(fadeInSpeed, function(){ 
      fadeBtn(el, fadeOutSpeed, fadeInSpeed); 
     }); 
    }); 
} 

fadeBtn(jQuery('.pulseBtn'), 750, 2500); 

的jsfiddle:http://jsfiddle.net/f5q6kuse/