jQuery - I need home page of slider to display when page originally loaded. Current code provided

Question

Essentially, I want my website to have the same functionality as: http://jsfiddle.net/sg3s/rs2QK/ ; except, I want Target 1 (which will by my home page) to already be showing when you load the page the first time. At the moment my heading bar shows, but there is no content until I press one of the links. Accordingly, how do I edit the following code so that the home page shows when you first load the page?

(Also, how do I make it so you can only activate one link at a time i.e. not allow one animation to activate whilst another is activated).

CSS:

body, html {
height: 100%;
margin:0 auto;
width:100%;
background-color: #f1f1f1;
}

#wrapper {
    width:960px;
    height: 630px;
    margin:0 auto;
    font-family: Arial;
    color: #555;
    background-color: white;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }

div.forMovingPanel {
    position: absolute;
    height: 100%;
    width: 100%;
    display:none;
    }

HTML:

<div id="wrapper">

    <div id="headingLogoBar">
           <ul>
                <li id="menuDisplayedHome"><a href="#target1" class="forMovingPanel">HOME</li>
                <li id="menuDisplayedAbout"><a href="#target2" class="forMovingPanel">ABOUT</a></li>        
                <li id="menuDisplayedPortfolio"><a href="#target3" class="forMovingPanel">PORTFOLIO</a></li>    
                <li id="menuDisplayedContact"><a href="#target4" class="forMovingPanel">CONTACT</a></li>
            </ul>
    </div>

    <div class="forMovingPanel" id="target1"></div>
    <div class="forMovingPanel" id="target2"></div>
    <div class="forMovingPanel" id="target3"></div>
    <div class="forMovingPanel" id="target4"></div>

</div>

jQuery:

<script>


    jQuery(function($) {

$('a.forMovingPanel').click(function() {
var $target = $($(this).attr('href')),
    $other = $target.siblings('.active');

if (!$target.hasClass('active')) {
    $other.each(function(index, self) {
        var $this = $(this);
        $this.removeClass('active').animate({
            left: $this.width()
        }, 500);
    });

    $target.addClass('active').show().css({
        left: -($target.width())
    }).animate({
        left: 0
    }, 500);
}
});

});

</script>

Answer 1

To only show one animation at a time:

if ($(".panel").is(':animated')) return false;

To show #target1 on load:

<div class="panel active" id="target1" style="background:green;left:0;display:block;">Target 1</div>

http://jsfiddle.net/rs2QK/3624/

Answer 2

You could add an id to the link tag and trigger it when the page loads:

 <a id="link1" href="#target1" class="panel">Target 1</a><br/>

Then just trigger a click on the link:

 $("#link1").click();

See the link bellow

JsFiddle