Home/ Questions/Q 8905151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T02:19:09+00:00

I have the following code working in a jsfiddle: http://jsfiddle.net/S5Cjm/1242/ function InOut(elem) { var

  • 0

I have the following code working in a jsfiddle: http://jsfiddle.net/S5Cjm/1242/

function InOut(elem) {
var delayOn = 2000, // time each <li> should be visible
    delayOff = 0, // time between revealing each <li>
    fade = 1000; // fade duration

// Pause, fade in, pause again, fadeout, then fire the callback
elem.delay(delayOff).fadeIn(fade).delay(delayOn).fadeOut(function() {
    // If we're not on the last <li>
    if (elem.next().length > 0) {
        // Call InOut on the next <li>
        InOut(elem.next());
    }
    else {
        // Else go back to the start
        InOut(elem.siblings(':first'));
        }
    });
}

$(function() {
    // Hide all the li's
    $('#content li').hide();
    // Call InOut to loop through them
    InOut($('#content li:first'));
});

​
However, when embedded into my code it does not work.

I am referencing JQuery in my head thus:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

It worked inexplicably once and has not again despite replicating the code.

Any help greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This works for me:=) Nothing is wrong with your code except you forgot to wrap it inside $(document).ready(function(){}); 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="author" content=""/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title></title>
<style type="text/css">
*{margin:0px;padding:0px}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"   type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//alert('workin');
    function InOut(elem) {
    var delayOn = 2000, // time each <li> should be visible
    delayOff = 0, // time between revealing each <li>
    fade = 1000; // fade duration

// Pause, fade in, pause again, fadeout, then fire the callback
   elem.delay(delayOff).fadeIn(fade).delay(delayOn).fadeOut(function() {
    // If we're not on the last <li>
    if (elem.next().length > 0) {
        // Call InOut on the next <li>
        InOut(elem.next());
    }
    else {
        // Else go back to the start
        InOut(elem.siblings(':first'));
    }
    });
    }

    $(function() {
    // Hide all the li's
    $('#content li').hide();
    // Call InOut to loop through them
    InOut($('#content li:first'));
    });
    });
   </script>
   </head>
   <body>
       <ul id="content">
       <li>first</li>
       <li>second</li>
       <li>third</li>
       <li>fourth</li>
       <li>fifth</li>
       <li>sixth</li>
       </ul>
   </body>
   </html>
    • 0