Question

我的一位客户让我对div进行闪烁效果。我认为这对他来说可能不是最好的事情，也许光线渐渐消失不透明会引起顾客的注意，而不会让他们烦恼。

我目前有

 <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，那就更好了。

最佳，斯蒂芬

Answer 1

您可能希望拥有类似jsFiddle的内容。

您还可以通过保留计数器来指示您想要闪烁的次数。

来自jsFiddle的代码：

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

Answer 2

为什么不使用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>

然后，您可以使用旧版浏览器的后备广告。对方提出的任何脚本都很好，但我会建议乌兰的解决方案。

Answer 3

你可以这样做;

(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％不透明度之间的差异非常微妙。我在演示中做出了更大的改变。你可以明显地调整你想要的任何效果。

Answer 4

据我所知，你想在这里闪现一些东西：

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

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

Answer 5

如果您喜欢短代码，那么您可以在jQuery中使用plugin jquery-timing来计算时间。它会将您的完整代码缩小为：

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

哦，当你希望它切换特定次数（例如20）时，你就写了

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

很酷，嗯？

Jquery Opacity淡出循环

5 个答案: