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動畫隨機發生

回答

相關問題