Jquery不透明淡入淡出循環

我的一位客戶要求我在div上閃爍效果。我認爲這對他來說可能不是最好的，也許輕微的褪色和不透明會引起顧客的注意，而不會讓他們感到煩惱。Jquery不透明淡入淡出循環

我現在有

<a class="special_button" href="#">Special Offers &rsaquo;</a>

我有另一個div導致淡入瀏覽器的負載下面的代碼：

$('.logo-top').delay(700).animate({ 
    'opacity' : '1',   
    'top' : '+=40px' 
}, { duration: 700, easing: 'swing' });

如何將我做的special_button類似的東西，但反而循環不透明？從80到100？

它甚至會更好，如果它循環一定量的時候，也許像5

最佳，斯捷潘

來源

2012-10-05 Stepan Parunashvili

你可能想有這樣的事情jsFiddle。

而且您還可以通過保留一個計數器來指示您希望這個閃爍的次數。從的jsfiddle

代碼：

$(document).ready(function() { 
    function runIt() {   
     var baloon = $('#baloon'); 
     baloon.animate({opacity:'1'}, 1000); 
     baloon.animate({opacity:'0.5'}, 1000, runIt); 
    } 
    runIt(); 
});

來源

2012-10-05 06:05:25

嗨烏蘭，這工作出色！感謝您的幫助 - 它比我想象的要好得多。 –

這些值不是必需的（''+ = 1''和'' - = 0。5'），因爲不透明度永遠不會超過'1'，也不會低於'0'。僅僅是「1」和「0.5」就足夠了。 –

剛剛搜索並偶然發現這一點。感謝一堆，這正是我所需要的。 –

你可以不喜歡這樣;

(function() { 
    var cnt = 0; 
    var specials = $(".special_button"); 

    function next() { 
     if (cnt < 5) { 
      specials.fadeTo(2000, .1).fadeTo(2000, 1, next); 
      ++cnt; 
     }      
    } 

    next(); 
})();

工作演示：http://jsfiddle.net/jfriend00/558GY/

僅供參考，80％和100％的不透明度之間的區別是相當微妙的。我在演示中做出了更大的改變。你顯然可以調整到你想要的效果。

來源

2012-10-05 06:34:33 jfriend00

非常有趣！我也會向客戶展示這個演示。謝謝jfriend :) –

據我理解你想要的東西在這裏閃爍的：

$("document").ready(function() { 
    anm(".special_button"); 
}); 
function anm(element) { 
    $(element).delay(200).animate({ opacity: 'toggle' }, 1000, function() { anm(element); }); 
}

演示：http://jsfiddle.net/BerkerYuceer/GdcRs/

來源

2012-10-05 06:54:29

爲什麼不使用CSS3關鍵幀？

.twinkle { 
 
    background: red; 
 
    padding: 0.2em; 
 
    margin: 50px; 
 
} 
 

 
@-webkit-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-moz-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-ms-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
.twinkle { 
 
    -webkit-animation: twinkly 1s alternate infinite; 
 
    -moz-animation: twinkly 1s alternate infinite; 
 
    -ms-animation: twinkly 1s alternate infinite; 
 
    animation: twinkly 1s alternate infinite; 
 
}

<span class="twinkle">Special Offers &rsaquo;</span>

您可以使用舊版本瀏覽器的回退呢。其他方面的任何腳本都很好，但我會建議烏蘭的解決方案。

來源

2012-10-05 07:00:06

而你剛剛平整了我的CSS3 :)。謝謝Bram –

@StepanParunashvili沒問題！ –

如果你喜歡短代碼，那麼你使用plugin jquery-timing來計時jQuery中的東西。它縮小您的完整代碼：

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$);

哦，當你想要切換的時間（例如20）一個具體的數字，那麼你就寫

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$).until(20);

，酷嗎？

來源

2012-10-05 14:25:38 peter

Jquery不透明淡入淡出循環

回答

相關問題