Question

它＆＃34;向下滚动＆＃34;文本，我只需要它在用户在页面上的整个时间内从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);
});

这是我想要的那种代码，但是控制台日志抛出了太多的递归＆＃34;错误：

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，所以请原谅我，如果这是一个糟糕的组合和/或愚蠢的问题。哦，如果你想用简单的javascript替换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

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

＆＃13;

;(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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这与布拉德的答案类似，但这是一种更基本的方法。

正如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>

如何将div从0不透明度变为1，连续不点击？

3 个答案: