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不透明淡入淡出循环

回答

相关问题