如何使div从0不透明度连续闪烁到1，而不单击

Question

这是"向下滚动"文本，我只需要它在用户在页面上的整个时间内从0不透明度平滑地来回闪烁到1。

这是HTML和CSS：

<div class="begin-scroll">SCROLL<br>
<span>TO BEGIN</span>
</div>
.begin-scroll{
    font-family:'Charliedontsurf';
    font-size:43px;
    color:#FFFFFF;
    position:absolute;
    bottom:20%;
    width: 100%;
    text-align: center;
    line-height:0.7em;
    opacity:0;
}
.begin-scroll span{
    font-size:34px;
}

这是适用于我想要的效果类型的代码（减去连续闪烁）：

jQuery(document).ready(function($) {
$('.begin-scroll').delay(3500).fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1).fadeTo(1000,0).fadeTo(1000,1);
});

这是我想要的代码，但控制台日志抛出了一个"太多递归"错误：

jQuery(document).ready(function($) {
$('.begin-scroll').delay(3500).fadeTo(1000,1,pulsatingOut());
function pulsatingOut(){
    $('.begin-scroll').fadeTo(1000, 0, pulsatingIn());
}
function pulsatingIn(){
    $('.begin-scroll').fadeTo(1000, 1, pulsatingOut());
}
});

我不太喜欢jQuery，所以如果这是一个拼凑不好和/或愚蠢的问题，请原谅我。哦，如果你想用普通的'oljavascript完全取代jQuery来解决这个问题，请放心，任何解决方案都有帮助。

Answer 1

必须是Javascript/jQuery吗？这可以在CSS中使用动画和关键帧来解决。

@-webkit-keyframes NAME-YOUR-ANIMATION {
      0%   { opacity: 0; }
      50% { opacity: 1; }
      100% {opacity: 0; }
    }
    @-moz-keyframes NAME-YOUR-ANIMATION {
      0%   { opacity: 0; }
      50% { opacity: 1; }
      100% {opacity: 0; }
    }
    @-o-keyframes NAME-YOUR-ANIMATION {
      0%   { opacity: 0; }
      50% { opacity: 1; }
      100% {opacity: 0; }
    }
    @keyframes NAME-YOUR-ANIMATION {
      0%   { opacity: 0; }
      50% { opacity: 1; }
      100% {opacity: 0; }
    }
    
    #box {
      -webkit-animation: NAME-YOUR-ANIMATION 2s infinite; /* Safari 4+ */
      -moz-animation:    NAME-YOUR-ANIMATION 2s infinite; /* Fx 5+ */
      -o-animation:      NAME-YOUR-ANIMATION 2s infinite; /* Opera 12+ */
      animation:         NAME-YOUR-ANIMATION 2s infinite; /* IE 10+, Fx 29+ */
    }

<div id="box" style="width: 50px; height: 50px; background-color: red;"></div>

Answer 2

从.fadeTo调用中的complete参数中删除()。您只想传递该函数的引用，而不是结果。

;(function($){
  $(function(){
    // store a reference (slight cache improvement)
    var $el = $('.begin-scroll');
   
    // declare the functions
    function pulsatingOut(){
      $el.fadeTo(1000, 0, pulsatingIn);
    }
    function pulsatingIn(){
      $el.fadeTo(1000, 1, pulsatingOut);
    }
    // call first one and have it loop through
    pulsatingIn();
  });
})(jQuery);

.begin-scroll { width: 100px; height: 100px; background-color: #f0f; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="begin-scroll"></div>

Answer 3

这与Brad的答案相似，但却是一种更基本的方法。

正如Brad所说，您将希望将callback传递给fadeTo方法。回调也被称为delegates、function references等。一旦在末尾添加括号，就会告诉JavaScript执行该函数引用。

既然我已经在Brad回答的时候练就了小提琴，下面是我的想法。它并不那么独立，但它很有效，并给你一个简化的想法。我不得不把你的文字颜色改成黑色。

jsfiddle：http://jsfiddle.net/o5qgq6LL/1/

function pulsatingIn(){
    $(this).fadeIn(1000, pulsatingOut);
}
function pulsatingOut(){
    $(this).fadeOut(1000,  pulsatingIn);    
}
$('.begin-scroll').delay(3500).fadeIn(1000, pulsatingOut);
    
    
    
    

.begin-scroll{
    font-family:sans-serif;
    font-size:43px;
    color:#000;
    position:absolute;
    bottom:20%;
    width: 100%;
    text-align: center;
    line-height:0.7em;
    display:none;
}
.begin-scroll span{
    font-size:34px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="begin-scroll">SCROLL<br>
<span>TO BEGIN</span>
</div>