使用jQuery進行奇怪的百分比計算

我在我的頁面上顯示了一個有趣的旋轉木馬。儘管我的jsfiddle工作順利，但它在我的網站上的運行方式非常不同。使用jQuery進行奇怪的百分比計算

這裏是一個的工作質樸的網站：http://drainteractive.com/conceptstudio/

這裏是工作的jsfiddle：http://jsfiddle.net/ExRR7/13/

我functions.js文件的代碼是完全一樣的東西在的jsfiddle：

$('.move-left').click(function(){ 
$('.belt').animate({right: '-=50%'}, 0); 
}); 

$('.move-right').click(function(){ 
$('.belt').animate({right: '+=50%'}, 0); 
});

但是，在網站上，第二次點擊其中一個箭頭時，事情變得奇怪。在最初的50％跳躍之後，belt.div右移約600％。然後大約3000％。

任何人都知道可能是什麼原因造成的？

編輯：還行，擁有的jsfiddle +/- = 25％而不是50％，但是這不是什麼導致的問題。

來源

2013-07-17 invot

它看起來像'$（「帶」）返回的值。 css（'right'）'是返回像素。所以第一次工作時，因爲css'right'屬性爲0.在動畫一次後，css'right'屬性爲477.5px。 jQuery獲取當前css右邊的屬性（返回477.5px），添加50（你想添加的百分比），然後將css右邊的屬性設置爲527.5，並在末尾添加'％'。它從那裏繼續。 –

這解釋了爲什麼百分比取決於我的瀏覽器窗口的大小。 – invot

我無法測試，但這應該工作

var count = 0; 

    $('.move-left').click(function(){ 
     count -= 50; 
     $('.belt').animate({right: count + '%'}, 0); 
    }); 

    $('.move-right').click(function(){ 
     count += 50; 
     $('.belt').animate({right: count + '%'}, 0); 
    });

是就像賈森P表示。當您第一次爲.belt設置動畫時，right的值將爲自動。所以jQuery的添加的50% jQuery使用getComputedStyle（如果我右）得到的權值，所以雖然樣式屬性將50% getComputedStyle將在px

來源

2013-07-17 20:32:09 iConnor

這工作完美！非常感謝。非常聰明的解決方案！ – invot

試試這個：

$('.move-left').click(function() { 
    var width = $('.belt li').width() + 44 + 'px'; // li width + padding 
    $('.belt').animate({right: '-=' + width}, 0); 
}); 

$('.move-right').click(function() { 
    var width = $('.belt li').width() + 44 + 'px'; // li width + padding 
    $('.belt').animate({right: '+=' + width}, 0); 
});

來源

2013-07-17 20:15:06

我明白你要做什麼，但這不適用於開箱即用的響應式佈局。 – invot

使用jQuery進行奇怪的百分比計算

回答

相關問題