在Chrome和Safari瀏覽器中使用jQuery .animate跳轉

我在網站上遇到jQuery的.animate功能問題我從第一天開始管理這個功能，但我還沒有找到解決方案（請參閱http://www.standrewsvoluntaryservice.org.uk/find.php）。在Chrome和Safari瀏覽器中使用jQuery .animate跳轉

當點擊其中一個彩色鏈接，例如「Youth」時，我已經設置了jQuery，以便鏈接全部聚集在頁面的右側，並且內容出現在所選鏈接中。在火狐瀏覽器中，這種方式正如預期的那樣工作，但在IE，Safari和Chrome瀏覽器中，在塊放置在頁面頂部之前有一個巨大的跳躍，因爲它應該如此。

任何幫助將不勝感激 - 我不是最好的與jQuery和搜索了很多次的答案，但無濟於事！

編輯：jQuery的控制這個節目隱藏幻燈片效果是：

<script type="text/javascript"> 
$(document).ready(function() { 
$(".return_project_box").hide(); 
$('.info_show').click(function(){ 
    $(".area").hide(); 
    $(".find_body").delay(200).show(); 
     $(".project_area_displayer").hide(); 
     $(".find_body_projects").animate({ 
      width:"1000px" 
      }, 400); 
     $(".find_body_projects").removeClass("float_right"); 
     $(".project_box_constant").removeClass("small_project_box"); 
     $(".return_project_box").hide(); 
    var toggle_function = true; 
    return false; 
}); 

    var toggle_function = true; 
    $('.youth_show').click(function(){ 
     $(".project_area_displayer").not(".youth").hide(); 
     $(".find_body").hide(); 
     if(toggle_function = true) 
     { 
      $(".youth").delay(200).slideDown(); 
      $(".find_body_projects").animate({ 
       width:"185px" 
       }, 200); 
      $(".find_body_projects").addClass("float_right"); 
       $(".project_box_constant").addClass("small_project_box"); 
     } 
     $(".return_project_box").show(); 
     var toggle_function = false; 
     $(".information").hide(); 
     return false; 
    }); 
}); 
</script>

來源

2012-12-03 dplanet

請問您可以發佈相關的jQuery代碼，我會看看它 –

@NathanKot - 嗨Nathan我附上了代碼請求。 – dplanet

你也需要發佈你的HTML和CSS。我的猜測是，問題是使用'.addClass（）'和'.removeClass（）'調用使得元素「進出」浮動的競態條件。你可能會不得不把一個或另一個放在'.animate（）'的onComplete回調中，以防止它彈出。 –

哎呀，還好我嘗試添加這是一個評論，但它太長。所以我將把它作爲答案加入。即使它沒有具體回答你的問題。

它只是一個簡單的例子，說明如何做幹什麼，同時做幹。這不是一個複製&粘貼實施，但如果你使用類似的東西，你的問題應該消失。

<div id="find_container"> 
    <div class="find_body_projects float_right"> 
     <a href="#youth" class="find_item"></a> 
     <a href="#youth_special" class="find_item"></a> 
     <a href="#adult_special" class="find_item"></a> 
    </div> 
</div> 

<div id="project_content"> 
    <div id="youth" class="project_item active"></div> 
    <div id="youth_special" class="project_item"></div> 
    <div id="adult_special" class="project_item"></div> 
</div> 

<script> 
$(function() { // On Doc Ready 
    $('.find_item').on('click', function(e) { // Menu item is clicked 
     e.preventDefault() // Prevent the default behavior of link 
     var $chosen = $($(this).attr('href')) // Find the chosen page by using the href attr 
     ,  $current = $('.project_item.active') // Find the currently chosen page by using the `.active` class 
     if(!$chosen.length) return false // Exit if the chosen page doesn't exist 
     // Hide the current one 
     $current.hide(function() { 
      // Show the chosen one 
      $chosen.slideDown() 
     }); 
    }) 
}); 
</script>

來源

2012-12-03 05:12:10

在Chrome和Safari瀏覽器中使用jQuery .animate跳轉

回答

相關問題