鉻：只在一定的過渡效果怪異的滾動條

我使用jQuery在我的全屏幕的背景圖像應用以下效果：鉻：只在一定的過渡效果怪異的滾動條

function moveDown(){ 
    $('body').find('img').delay($delay*1000).animate({top: "+="+$distance}, $seconds*1000,'swing') 
} 
function zoomOut(){ 
    $('body').find('img').css({"transition":"all 6s linear","transform":"scale(1)"}); 
} 
function zoomIn(){ 
    $('body').find('img').delay($delay*1000).animate(obj,6500,'linear'); 
}

這個偉大的工程，但只與第二功能縮小（ZoomOut）（）我m僅在Chrome中遇到問題。在執行轉換時，我會在正常滾動條旁邊看到一個奇怪的滾動條，這個滾動條僅在轉換進行時才顯示。正如你可以在這個圖像上看到

2 scroll bars

再次消失，並在過渡期間它再次顯示了轉換後？

任何人有關如何擺脫第二個滾動條的任何想法？

來源

2014-10-20 user3629755

代碼將有助於診斷此問題，即對受影響的對象的CSS。 – 2014-10-20 14:35:22

沒有受影響的對象，它只是全屏bg圖像 – user3629755 2014-10-20 14:46:13

BG圖像是一個實際的'background-iamge'還是它被拉伸到頁面寬度和高度的'img'標籤？ – 2014-10-20 14:59:18

這裏有兩件事，我會懷疑開始。

您正在爲moveDown和zoomIn使用基於JavaScript的動畫，但隨後在zoomOut上設置了CSS動畫值。儘量保持與動畫一致，並儘可能使用CSS動畫，因爲與JavaScript動畫相比，它們的表現更好（使用硬件加速等）。

當您設置該CSS過渡值時，當另一個動畫觸發時，它不會被「取消應用」，這意味着在moveDown或zoomIn中完成的每個增量更改都會對其應用六秒的過渡。

如果你想快速和骯髒的修復，你可以把下面的塊zoomIn和下移：

$('body img').css({'transition':'none', 'transform':'none'});

但是最好你就可以把所有包裹在一個類，這些CSS轉換，那麼就應用通過JavaScript的類。

只是我的2¢

來源

2014-10-20 14:58:39

你肯定對動畫的一貫使用是正確的，並且會這樣做。但建議的修復似乎不是解決這個第二個出現的滾動條... – user3629755 2014-10-20 15:10:16

鉻：只在一定的過渡效果怪異的滾動條

回答

相關問題