I think your problem is nothing has the activetab class first, so
$(".activetab") selects nothing, you don't start any fadeOut and the
fadeIn() callback doesn't get called. Though I'm a bit puzzled as to how it
works on the second and subsequent calls (as you don't give the activetab
class to any element in the first call, next time shouldn't be any
different).
I'm also surprised by the method you're using to keep the selected link. I
would do this instead :
$("a.tabs-link").click(function() {
var link = this;
$(".activetab").fadeOut(1000, function() {
$(this).fadeIn(1000).addClass("activetab")
}).removeClass("activetab");
});
Michel Belleville
2009/11/29 ghostrunner <p...@rasmusa.dk>
> Hey.
> I switch betweem three div by clicking on three different link. See
> code below.
> I use fadein and fadeout to switch between the divs.
> The first time i click on one of the links after the pages is loadet
> the current div just disappears. It doesn't fadeout.
> The second time and everytime after that fadeout works fine. What am i
> doing wrong? have tried in both firefox an Internet explorer.
>
> Code:
> ----HTML----
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
> <head>
> <link rel="stylesheet" type="text/css" media="screen" href="css/
> general.css" />
> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
> <script type="text/javascript" src="js/jquery-
> ui-1.7.2.custom.min.js"></script>
> <script type="text/javascript" src="js/effects.js"></script>
> </head>
> <body>
> <ul class="tabs-nav">
> <li><a href="javascript:;" class="tabs-link">Mod1</a></li>
> <li><a href="javascript:;" class="tabs-link">Mod2</a></li>
> <li><a href="javascript:;" class="tabs-link">Mod3</a></li>
> </ul>
> <div class="abv-content activetab">
> Mod1 Mod1 Mod1 Mod1 Mod1 Mod1 Mod1 Mod1
> </div>
> <div class="abv-content">
> Mod2 Mod2 Mod2 Mod2 Mod2 Mod2 Mod2 Mod2
> </div>
> <div class="abv-content">
> Mod3 Mod3 Mod3 Mod3 Mod3 Mod3 Mod3 Mod3
> </div>
> </body>
> </html>
> ----CSS----
> .abv-content {
> display:none;
> border: 2px dotted black;
> z-index: 50;
> margin-left: 200px;
> height: 500px;
> }
> .abv-content.activetab {
> display:block;
> border: 2px dotted black;
> z-index: 50;
> margin-left: 200px;
> height: 500px;
> }
> .tabs-nav {
> position: absolute;
> top: 20px;
> left: 20px;
> border: 2px solid black;
> width: 100px;
> margin: 10px 10px 0px 10px;
> padding: 2px 0px 5px 10px;
> -moz-border-radius: 10px;
> list-style-type: none;
> z-index: 100;
> background-color: green;
> }
> ---Jquery---
> $(document).ready(function() {
>
> $("a.tabs-link").click(function() {
> var linkIndex=$("a.tabs-link").index(this)
> $(".activetab").fadeOut(1000, function() {
> $(".abv-content").eq(linkIndex).fadeIn(1000).addClass("activetab")
> }).removeClass("activetab");
> });
> });
>
