Hi, I did something with jQuery, but I think it could be more
unobtrusiv and simplier done. Do you have any suggestions?

1Page with 4 Divs

<div id="logo">
LOGO <-- click on that it fades away and go to div#content
</div>

<div id="content">
Homepage
Link Sandra<-click, this div fades away, div#sandra is shown
Link Ahmed<-click, this div fades away, div#ahmed is shown
</div>

<div id="sandra">
sandra
Link Home<-click, this div fades away, div#content is shown
</div>

<div id="ahmed">
ahmed
Link Home<-click, this div fades away, div#content is shown
</div>

my jQuery:
$(document).ready(function(){

                        $("#logo").click(function() {
                                $("#logo").fadeOut("slow");
                                $("#logo").animate({opacity: 0.0}, 500 );
                                $("#content").fadeIn("slow");
                                });

                        $("a.sandra").click(function() {
                                $("div").fadeOut();
                                $("#content-sandra").fadeIn();
                                });

                        $("a.ahmed").click(function() {
                                $("div").fadeOut();
                                $("#content-ahmed").fadeIn();
                                });

                });

the links look like this:
<a href="#" class="sandra">Home</a> , etc...

I works well, but my guts tell me, this could be done more nicely!

eager to learn,
thx tom

Reply via email to