JQuery fade in/out

Question

I have a set of divs that fade out and fade in when their respective menulink is clicked. The first div should load automatically on pageload without any fades, and if no content is loaded there should only be a fade in effect. Now I'm getting all of this done except for the instant load of the first div. When I load the page, no content is present, a fade out occurs and then the first div automatically fades in. How can I make sure the first div I have automatically loads without any fades?

Current code:

$(document).ready(function () {
  $('a').bind("click", function () {
    $('a').removeClass("actief");
    $(this).addClass("actief");
    var fade = $(this);

    if ($('#content').html()) {
      $(this).addClass("actief");
      $('#content').stop().fadeTo(500, 0, function () {
        $('#content').html("").css('opacity', 0);
        fade.next().clone().appendTo('#content');
        $('#content').stop().fadeTo(500, 1);
      });
    } else {
      $('#content').css('opacity', 0);
      fade.next().clone().appendTo('#content');
      $('#content').stop().fadeTo(500, 1);
    }
  });

  $('a:first').trigger('click');
});

HTML:

This is the html

<body>
    <div id="container">
        <div id="menudiv">
            <ul id="menu">
                <li>
                    <a>About</a>
                    <div>
                       <H1>About</H1>
                           <img src="pic.png">
                           <p></p>
                    </div>
                </li>
                <li>
                    <a>Knowledge</a>
                    <div>
                       <H1>Knowledge</H1>
                           <img src="pic.png">
                           <p></p>
                    </div>
                </li>
                <li>
                    <a>Expectations</a>
                    <div>
                       <H1>Expectations</H1>
                           <img src="pic.png">
                           <p></p>
                    </div>
                </li>
                <li>
                    <a>More</a>
                    <div>
                       <H1>More</H1>
                           <img src="pic.png">
                           <p></p>
                    </div>
                </li>
            </ul>
    </div>

    <div id="content">

    </div>
</div>

</body>

CSS

*{
    margin:0px;
    padding:0px;
}

#container{
    width:800px;
    height:600px;
    margin:auto;
    background-color:#6CF;
}

#menudiv{
    width:800px;
    background-color:#066;
    height:50px;
    float:left;
    margin-top:20px;
    border-bottom:2px solid orange;
}

#content{
    width:800px;
    background-color:#069;
    height:400px;
    float:left;
}

#content p{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    color:white;
    padding:10px;
}

#content img{
    border: 2px solid white;
    margin-left:10px;
    float:left;
    margin-right:10px;
}

H1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:white;
    padding:10px;
}

ul li{
    list-style-type:none;
    float:left;
    margin:10px;
    background-color:black;
    color:white;
    border:2px solid white;
    padding:4px;
}

ul li div{
    display:none;
    text-decoration:line-through;
}

ul li .actief{
    color:orange;
}

#menu ul li div{display:none}
#menu ul li:first-child div{display:block}

Please indent your code for better readability. You can use http://jsbeautifier.org/ for quickly doing this. — Yoshi, Jan 08 '13 at 14:51
I have included the HTML, deleted the dutch gibberish in the p tags for your convenience. — Rancid Pig, Jan 08 '13 at 15:29

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

You can do this via CSS,

#menu ul li div{display:none}
#menu ul li:first-child div{display:block}

then it will reset on page load

(you might want to make your CSS a bit more specific though)

Update I:

Oops, didnt spot the .clone() bit, instead of the .trigger("click"), you can use this...

$('a:first').next().clone().appendTo('#content');

This will copy the first div into the page body as you describe

Update II:

To keep the .trigger() you could detect if the .click is triggered by a real click (see here) then bypass the .fade effect in your click function (or there are probably 101 other ways to do it!)

edited May 23 '17 at 11:43

Community

1
1

answered Jan 08 '13 at 15:32

DaveB

2,953
7
38
60

I'll add the CSS. Still fades out and in to the content from the first link. – Rancid Pig Jan 08 '13 at 15:37
Thanks it works now! Is there any way to do this while keeping the trigger? – Rancid Pig Jan 08 '13 at 15:47
Yep sure, have added to the answer – DaveB Jan 08 '13 at 15:52

JQuery fade in/out

1 Answers1