Hi i am trying to get a piece of text to fade in and out automatically without a click or hover method.

i'm not sure i can use an on page load function either because the text i want to fade in and out only appears after a user clicks to open another div on the page.? (I may be wrong?)

I am using this script but the text is static and not doing anything. Can anyone advise me where i'm going wrong? Thanks

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

</script>

Hi i am trying to get a piece of text to fade in and out automatically without a click or hover method.

i'm not sure i can use an on page load function either because the text i want to fade in and out only appears after a user clicks to open another div on the page.? (I may be wrong?)

I am using this script but the text is static and not doing anything. Can anyone advise me where i'm going wrong? Thanks

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

</script>

• javascript

• Can you please include the relevant html – Sharlike Commented Dec 18, 2012 at 15:56
• Or, more important, show us the code that lets the text "appear after a user clicks to open another div on the page". Likely this is your error, as your polling solution does not work. Triggering the animation on show would be the better choice anyway. – Bergi Commented Dec 18, 2012 at 16:20

3 Answers 3

This sounds like it would be better as a CSS animation:

#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}
}

This will work in Firefox, Chrome and IE10. Since this is more eye-candy than a required feature, that seems acceptable to me.

Notwithstanding that CSS is probably the better answer, your code doesn't work because it repeatedly calls cycle() without ever waiting for the second animation to finish.

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

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

replace

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

with

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

if the div is hidden it does not matters