javascript - javascript：使用淡入淡出的脉冲文本？

Question

嗨，我正在尝试让一段文本自动淡入和淡出，而无需单击或悬停方法。

我不确定我是否可以使用页面加载功能，因为我想要淡入和淡出的文本仅在用户单击以打开页面上的另一个 div 后出现。？（我可能错了？）

我正在使用这个脚本，但文本是静态的，没有做任何事情。谁能告诉我我哪里出错了？谢谢

<script>
function cycle() {
    $('#morebutton-pics').fadeOut(1000, function() {
        $('#morebutton-pics').fadeIn(1000);
        cycle();
    });
}
$(document).click(function(){
    cycle();
});

</script>

Answer 1

这听起来像 CSS 动画会更好：

#morebutton-pics {
  animation: pulse 1s alternate infinite;
  -webkit-animation: pulse 1s alternate infinite;
}
@keyframes pulse {
  from {opacity:1}
  to {opacity:0}
}
@-webkit-keyframes pulse {
  from {opacity:1}
  to {opacity:0}
}

这将适用于 Firefox、Chrome 和 IE10。由于这比必需的功能更吸引眼球，这对我来说似乎可以接受。

Answer 2

尽管 CSS 可能是更好的答案，但您的代码不起作用，因为它反复调用cycle()而无需等待第二个动画完成。

function cycle() {
    var $el = $('#morebutton-pics');

    $el.fadeOut(1000, function() {
        $el.fadeIn(1000, cycle);  // loop in the second callback
    });
}

Answer 3

代替

$(document).click(function(){
     cycle();
});

和

$(document).ready(function() {cycle(); });

如果 div 被隐藏，则无关紧要