Question

All I want to do is to call this function while page is loading or after loading automaticly, I mean without hover or click or etc.
If I manage that I am going to put it in a for loop with a delay function in order to call bg1, bg2 bg3 and bg4 respectively

I have read so many questions all seem similar but somehow they don’t work for me.
Could you please help me about it?

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

$(function slide() 
{
    $('#accordion > li.bg1')(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'350px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        }
        ),
    function () {
        var $this = $(this);
        $this.stop().animate({'width':'115px'},1000);
        $('.heading',$this).stop(true,true).fadeIn();
        $('.description',$this).stop(true,true).fadeOut(500);
        $('.bgDescription',$this).stop(true,true).slideUp(700);
                }
});
</script>



<div id="content">
<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg2">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg3">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
    <li class="bg4">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>
</div>

Answer 1

First, try replacing the line $(function slide() with the usual wrapper $(document).ready(function() { and make sure that all your parentheses and braces are balanced correctly.

Second, your selector needs a method call, which you don’t have. It’s unclear what you want to happen — do some of the HTML elements need to be hidden, then show up slowly? Or vice versa? Do you want it to toggle back and forth continuously? We can help you, but only if you’re more specific about what problem you’re trying to solve.

UPDATE

If you want to animate the list items in sequence, you need a few things. First, a setTimeout that calls your function from within itself after a delay. Second, use $('#accordion > li').eq(i) to pick out the ith list element, with i being incremented each time your function is called. And finally (and aesthetically), replace those fadeIn/fadeOuts with slideDown/slideUps so that the whole thing doesn’t jerk and shift as it animates.

http://jsfiddle.net/mblase75/EJXRD/

function slide(i) {
    var $this = $('#accordion > li').eq(i);
//  $this.stop().animate({'width': '350px'}, 500); // not sure what this is meant to do
    $('.heading', $this).stop(true, true).slideUp(500);
    $('.bgDescription', $this).stop(true, true).slideDown(500);
    $('.description', $this).stop(true, true).slideDown(500);

    var $that = $this.siblings();
//  $that.stop().animate({'width': '115px'}, 500);
    $('.heading', $that).stop(true, true).slideDown(500);
    $('.description', $that).stop(true, true).slideUp(500);
    $('.bgDescription', $that).stop(true, true).slideUp(500);

    var items = $('#accordion > li').length;
    setTimeout(slide, 2000, (i+1) % items); // modulo
}

$(document).ready(function() {   // start the loop at the top
    slide(0);
});