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被隐藏则无关紧要

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

3 个答案: