jquery动画随机发生

我有一种启动画面，按下其中一个标志，然后将标志动画到中心，然后为其加载内容。然后，当您按下主顶部徽标时，它将隐藏内容并返回到闪屏。但是，我有这个问题。jquery动画随机发生

如，容器隐藏，然后回来。

找你自己：http://dan.roguedraco.net/SpyroDev/ 如果在内容完全出现之前点击顶部标志，但我想允许所有这些事件发生。因为用户可能会这样做。

使用Javascript：

$(document).ready(function() { 

var inPage = false; 

$('.ajax-loader').click(function() { 
    if(inPage == false) { 
     inPage = true; 
     var Obj = this; 

     $(Obj).siblings("a").fadeOut(500,function() { 
      if($(Obj).hasClass('left') || $(Obj).hasClass('right')) { 
       $(Obj).animate({left:'300px'},'slow','easeOutBack',function() {    
        $('#pageContent').fadeIn(500,function() { 
         $("#tabs").tab(); 
        }); 
       }); 
      } 
      else { 
       $('#pageContent').fadeIn(500,function() { 
        $("#tabs").tab(); 
       }); 
      } 
      $(Obj).addClass('current-project'); 
     }); 
    } 
}); 

$('#rootLogo').click(function() { 
    var Obj = $('.current-project'); 
    if(inPage == true) { 
     inPage = false; 
     $('#pageContent').fadeOut(500,function() { 
      $(this).hide(); 
      if($(Obj).hasClass('left')) { 
       $(Obj).animate({left:'0px'},'slow','easeOutBack',function() { 
        $(Obj).siblings("a").fadeIn(500); 
       }); 
      } 
      else if($(Obj).hasClass('right')) { 
       $(Obj).animate({left: '600px'},'slow','easeOutBack',function() { 
        $(Obj).siblings("a").fadeIn(500); 
       }); 
      } 
      else { 
       $(Obj).siblings("a").fadeIn(500); 
      } 
      $(Obj).removeClass('current-project'); 
     }); 
    } 
});

}）;

HTML：

 <div id="thumbnails"> 
      <div class="row-fluid"> 
       <div class="span12" style="text-align: center;color:#fafafa;"> 
        Click a plugin title for more information and downloads. 
       </div> 
      </div> 
      <div class="row-fluid"> 
       <div class="span12" id='thumbnails'> 
        <a href="#" class="ajax-loader left" project="JumpPorts" page="Home"><img src="projects/JumpPorts/thumb.png" alt="JumpPorts" /></a> 
        <a href="#" class="ajax-loader" project="RankUpOnKills" page="Home"><img src="projects/RankUpOnKills/thumb.png" alt="RankUpOnKills" /></a> 
        <a href="#" class="ajax-loader right" project="InfoButton" page="Home"><img src="projects/InfoButton/thumb.png" alt="InfoButton" /></a> 
       </div> 
      </div> 
     </div> 

     <div id="pageContent" style="display:none;"> 
      <div class="row-fluid"> 
       ...

来源

2012-09-16 Dan Spiteri

.stop()

你试图使用.stop()您.animate()和.fadeIn()和其他有生命方法之前？如：$(Obj).stop().animate({left:

来源

2012-09-16 19:51:31

是的，我已经尝试过，当我添加所有动画的盈方（fadeIn，fadeOut和a nimate），它做的是奇怪的动画，但内容不会淡入或者任何东西：S –

@DanSpiteri比尝试只在你的'.animate（）的前面使用它 –

我可以发誓我试过！但是，嘿，它的作品！谢谢：D –

您是否考虑过不让徽标的“”可点击？我的意思是，只要点击了，你就可以准备好你的活动。

试试这个：

在.ajaxloader的事件中添加标志图像上的在事件的代码的最后sorrounding它。

然后切换：

$('#rootLogo').click(function() { 
var Obj = $('.current-project'); 
.... 
}

此：

$('#click-event').click(function() { 

// Assuming #click-event is the name of the span you placed 

var Obj = $('.current-project'); 
..... 
}

，并最终删除的.ajaxloader.click事件

创建的跨度这是一个想法，你可以使用它，告诉我它是否工作

来源

2012-09-16 20:04:35 PlaceUserNameHere

jquery动画随机发生

回答

相关问题