CODEWITHSUNDEEP
jqueryhtml
Frankie
Frankie

Reputation: 596

How to implement fade in/out changing lines of text?

I am trying to do precisely what is illustrated here: http://jsfiddle.net/VB4QC/ but because I am out of my comfort zone, the bits that are not spelt out are stopping me from implementing it myself. Specifically I need to know what the Jquery include looks like, how to insert the Javascript, and how to call it. Let me show you what I'm currently guessing.

In the head of my document I add: 

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>

I have a local copy of this file and it works - tested with other elements, so the above seems fine.

To the Javascript given on the JSFiddle site I have added:

<script type="text/javascript">
.
.
.
</script>

So to be literal, the body of my page contains:

    <script type="text/javascript">
var terms = ["term 1", "term 2", "term 3"];

function rotateTerm() {
  var ct = $("#rotate").data("term") || 0;
  $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
              .delay(2000).fadeOut(200, rotateTerm);
}
$(rotateTerm);
</script>

And lastly my guess was to call it with a body onload:

<body onload="rotateTerm()">

And of course the HTML body contains:

  <p>Here is a sentence <span id="rotate">this</span> is what changes</p>

So I am following the example as closely as I can (I think). What happens is that the page renders Here is a sentence and: term 2 is what changes There is no fading up or down, and it doesn't display 'this', 'term 1' or 'term 3', although it looks as if 'term 1' flicks past in a millisecond.

What am I doing wrong? A little hand holding here would go a long way!

Thank you in anticipation!

Upvotes: 2

Views: 1647

Answers (5)

Dharam Mali
Dharam Mali

Reputation: 959

jQuery version, with the same effect which Frank Anderson was looking for.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <p>Here is a sentence <span id="rotate">this</span> is what changes</p>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
        var terms = ["term 1", "term 2", "term 3"];
        var count = 0;
        function setText(){
            $("#rotate").text(terms[count]).animate({opacity: 0}, 1000, function() {
                $(this).animate({opacity:1},1000);
                setText();
            });
            count++;
            if(count>=terms.length){
                count=0;
            }
        }
     setText();
    });
    </script>
</body>
</html>

Upvotes: 0

Dharam Mali
Dharam Mali

Reputation: 959

I have done it with CSS Animation. You can try this as alternative.

<!DOCTYPE html>
<html>
<head>
    <style>
        #rotate{animation: fadeIn 2s infinite;}
        @keyframes fadeIn{
            from {opacity: 0;}
            to {opacity: 1;}
        } 
    </style>
</head>
<body>
    <p>Here is a sentence <span id="rotate">this</span> is what changes</p>

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var terms = ["term 1", "term 2", "term 3"];
        var count = 0;
        function setText(){
            $("#rotate").text(terms[count]);
            count++;
            if(count>=terms.length){
                count=0;
            }
        }
        var callFunction = setInterval(setText,2000);
        setText();
    });
    </script>
</body>
</html>

Upvotes: 1

Rodney Folz
Rodney Folz

Reputation: 6857

I wrote up a walkthrough that explains what your fiddle is doing: http://rodney.is/rotating/text/. Since SO frowns on link-only answers, here's a quick-n-dirty solution.

Include jQuery like this, right before the closing tag. Notice that you're using jQuery 1.3.1 and I'm including jQuery 1.11.0. I recommend you use the most recent version of jQuery that you can, because it will have fewer bugs and more features:

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Include your script right after you include jQuery:

    <script>

var terms = ["term 1", "term 2", "term 3"];

function rotateTerm() {
    var ct = $("#rotate").data("term") || 0;
    $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
          .delay(2000).fadeOut(200, rotateTerm);
}
$(rotateTerm);

    </script>

You don't need <body onload> - the script will run as soon as it can, thanks to jQuery.

Upvotes: 3

pete
pete

Reputation: 25081

Both Rodney Folz and nietonfir's answers are correct as both answers are using a higher version of jQuery than you are in your question (see http://api.jquery.com/delay/):

<!DOCTYPE html>
<html>
    <head>
        <!--
            jQuery 1.4 is the MINIMUM version required to make this work.
            This is because the .delay() method (used in rotateTerm() below)
            was not added to jQuery until v1.4:
                http://api.jquery.com/delay/

            jQuery can be linked in the head element, or the body (genuinely doesn't matter)
            provided it is linked prior to defining the other script (which uses jQuery).
        -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    </head>
    <body>
        <p>Here is a sentence <span id="rotate">this</span> is what changes</p>
        <!-- jQuery could also be linked here -->
        <script>
            var terms = ["term 1", "term 2", "term 3"];
            function rotateTerm() {
                var ct = $("#rotate").data("term") || 0; // get current term, defaulting to 0 if there is no current term
                $("#rotate")    // find element with id="rotate" (span)
                    .data("term", ct == terms.length - 1 ? 0 : ct + 1) //store next term, looping to the beginning of the array as necessary
                    .text(terms[ct]) // set the text of the span
                    .fadeIn() // fade the element in from full transparency
                    .delay(2000) // wait 2 seconds <-- this is the reason you must use jQuery 1.4 or higher
                    .fadeOut(200, rotateTerm); // fade the element out to full transparency and call this function again
            }
            $(rotateTerm); // odd syntactical construct explained below
            /*
             * Most often, jQuery is used after the DOM content has been loaded and parsed into a DOM tree.
             * jQuery has a special contruct that greatly simplifies the syntax to catch the event.
             * The two most popular forms are below:

             $(document).ready(function () {
                // do stuff when DOM content is loaded and parsed.
             });

             * or 

             $(function () {
                // do stuff when DOM content is loaded and parsed.
             });

             * I have a strong tendency to use the former as I think it increases readability.
             * What the above odd syntactical construct is doing is using the latter form, but it is
             * substituting a named function (rotateTerm) for the anonymous function.
             */
        </script>
    </body>
</html>

Upvotes: 3

nietonfir
nietonfir

Reputation: 4881

I am not really sure if I understood your question correctly, but if a single document is what you want, there you go:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Here is a sentence <span id="rotate">this</span> is what changes</p>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      var terms = ["term 1", "term 2", "term 3"];

      function rotateTerm() {
        var ct = $("#rotate").data("term") || 0;
        $("#rotate").data("term", ct == terms.length -1 ? 0 : ct + 1).text(terms[ct]).fadeIn()
                    .delay(2000).fadeOut(200, rotateTerm);
      }
      // Not needed anymore as the DOM is ready at this point
      // $(rotateTerm);
      // just call the function directly
      rotateTerm();
    </script>
  </body>
</html>

Personally I would do that script completely different, especially the data storage is unecessary imho. Do you need an explanation of the code?

Upvotes: 4

Related Questions