CODEWITHSUNDEEP
jqueryloopsfade
user1479719
user1479719

Reputation: 21

Jquery fading text with loop

I am trying to make a div containing text fade out another div fade in then the original come bac then repeat or loop it so it is constantly repeating the 2 messages this is my code:

<div id="specialoffer">
  <div id="specialoffertext">Reduced rates over the <br />
    next few months</div>
  <div id="specialoffertext2" style="display:none;">Contact us today to <br />
    find out more</div></div>​

    var $body = $(document.body),
    cycle;

(cycle = function() {
        $('#specialoffertext')..delay(2000)fadeOut('slow');
        $('#specialoffertext2').delay(3000).fadeIn('slow');
        $('#specialoffertext2').delay(3500).fadeOut('slow');
        $('#specialoffertext').delay(5000).fadeIn('slow', cycle);

})();​

It worked fine when playing with it on jsfiddle and then soon as I uploaded it it does not work??

Upvotes: 1

Views: 2703

Answers (3)

Lix
Lix

Reputation: 48006

jsFiddle handles loading jQuery for you. Did you perhaps forget to include the jQuery libraries?

Also you have (what looks like) JavaScript code outside of <script> tags.

You should place your code inside some <script> tags and also utilize jQuery's document.ready callback.

$(function(){
  // your code goes here
});

You also have syntactic problems with this line - 

$('#specialoffertext')..delay(2000)fadeOut('slow');

There is an erronious double period before delay and you are missing a period before fadeOut.

Upvotes: 0

gdoron
gdoron

Reputation: 150313

Use this:

(function foo() {
    $('#specialoffertext').toggle('slow', function() {
        $('#specialoffertext2').toggle('slow', foo);
    });
})();​

Live DEMO

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

Your code wouldn't run in jsfiddle as you have an extra dot here and you are missing another one

 $('#specialoffertext')..delay(2000)fadeOut('slow');

take it off and put it in the right place

 $('#specialoffertext').delay(2000).fadeOut('slow');

And evrything should work

http://jsfiddle.net/kEGgC/1/

Upvotes: 3

Related Questions