在谷歌瀏覽器出毛病了jQuery的幻燈片功能

我目前正在開發一個新的網站的代理，我的工作可以在這裏找到：在谷歌瀏覽器出毛病了jQuery的幻燈片功能

http://www.astwood.co.uk/testsite/wordpress/

在右上方有兩個按鈕，爲聯繫人和關於我們的部分滑下額外的內容。我有動畫使用下面的jQuery的額外的div的外觀：

隱藏在加載頁面上的內容：

$("#about").hide(); 
$("#contact").hide();

顯示和隱藏點擊與指定類的鏈接，當內容：

$(".aboutbtn").click(function() { 
    $('#contact').slideUp(
    function() { 

     $('#about').slideToggle('slow'); 

    }); 
}); 

$(".contactbtn").click(function() { 
    $('#about').slideUp(
    function() { 

     $('#contact').slideToggle('slow'); 

    }); 
});

這對大多數瀏覽器來說都完美，它會隱藏現有的打開的div，如果有的話打開指定的部分。但是，在mac中，在頁面加載後第一次按下按鈕時，它會滑下所請求的內容，並立即將其重新滑回。

任何幫助，將不勝感激。提前致謝。

來源

2013-01-11 Alex Sadler

無法在Mac上爲Chrome（23.something）重現，它似乎工作得很好。 – robertklep

你試過slideDown了嗎？ – Chanckjh

OS X 10.8.2上的Chrome 23.0.1271沒有問題。 – johankj

好了，原來它是與如何jQuery的應該在工作造成了干擾瀏覽器插件。有問題的瀏覽器擴展是雙擊它可以在這裏找到：

https://chrome.google.com/webstore/detail/double-click/mdoabndnbhmbbiggngmjbnoijnhfophe

來源

2013-01-11 10:59:45

這可能是因爲$("#about").hide();和$("#contact").hide();在Chrome瀏覽器中運行得太晚（似乎我的PC上的chrome工作正常......）。

嘗試在元素上放置一個css風格的display:none，而不是使用jQuery來隱藏它們。這意味着當瀏覽器渲染它們（甚至在JavaScript運行之前）它們將被隱藏。

來源

2013-01-11 09:19:57 chrisbradbury

這並不能解釋爲什麼元素滑落，然後立即再次上升。如果是.hide（）;正在做它的功能就會消失。是的，我很確定它的Mac - Chrome的東西，因爲它適用於我的Windows PC和所有其他瀏覽器在Mac上。 –

嘗試用'slideDown'替換'slideToggle'，看看它是否與切換有關... – chrisbradbury

兩個想法：

編排自己的切換操作，而依賴於.slideToggle();所請求的元素
問題.stop(true,true)之前滑動，向上/向下

其中一種或兩種一起可能有正確的效果，雖然很難知道爲什麼。

這裏有兩個想法一起代碼：

$(".aboutbtn").click(function() { 
    var $about = $("#about").stop(true,true); 
    $("#contact").slideUp(function() { 
     var fn = ($about.is(":hidden")) ? 'slideDown' : 'slideUp'; 
     $about[fn]('slow'); 
    }); 
});

來源

2013-01-11 09:54:00

我試過這段代碼，但遇到同樣的問題。 –

完全不可思議。如果使用'.slideUp（）'而不是'.hide（）'執行初始隱藏，會發生什麼？ –

有同樣的問題。開始認爲Chrome的問題比代碼更多。 –

只需添加明確：雙方到div /容器你是誰申請

溢出隱藏需要的slideToggle（）動畫，它無法正確地獲得高度。

它對我來說很明顯：都是。

來源

2014-08-12 12:44:54 nikunj

在谷歌瀏覽器出毛病了jQuery的幻燈片功能

回答

相關問題