當元素的底部值爲頂值時動畫效果

我試圖將絕對定位和定位在底部並保持在頂部和右側位置的元素動畫化。當元素的底部值爲頂值時動畫效果

CSS

.obj{ 
    position: absolute; 
    bottom: 0; 
    left: 200px; 
}

$('.obj').click(function(event){ 
    $(this).animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''}); 
});

與我目前擁有的是，一些瀏覽器（Chrome瀏覽器/ Safari瀏覽器），將觸發CSS，因爲它動畫這導致了對象跨跳的問題屏幕。

編輯：它似乎清除底部和左值，然後從top: 0, right: 0動畫。

此外，我不能將.css()放在.animate()的完整功能中，因爲當前的底部和左側定位會影響它的動畫效果。

感謝您的幫助！

來源

2011-04-01 Paul Sham

當你在animate（）之前鏈接css函數時它會產生相同的結果嗎？ – BiAiB 2011-04-01 13:55:35

是的，無論你如何鏈接它，它似乎是在Chrome/Safari中首先設置'.css（）'。 – 2011-04-01 14:01:21

通過「調情」你的意思是馬上跳躍？如果是的話，我不明白我可以通過這個css調用。你能描述一下當你刪除它時發生了什麼，或者提供一個在線例子（例如JSFiddler） – BiAiB 2011-04-01 14:11:46

您可以將動畫相對於起始位置作爲基準，或者在這種情況下左下角使其在Chrome中更好地滑動。

$('div.obj').click(function(event){ 
    var obj = $(this); 
    var top = obj.context.offsetTop; 
    var right = obj.context.offsetParent.clientWidth - (obj.context.offsetLeft*2); 
    obj.animate({bottom:top+'px', left: right+'px' }, 400); 
});

來源

2011-04-01 14:45:39 ChrisThompson

謝謝！我還沒有實現它，但我認爲根據頂部和右側計算底部和左側應該可行。 – 2011-04-01 16:04:09

你應該對影響使用超時函數O的CSS有時間來加載:) 谷歌吧:)

來源

2011-04-01 14:34:06 cmplieger

 
$(this.animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''});

應該是：

 
$(this).animate({top:'15%', right: '300px' }, 400).css({'bottom': '', 'left': ''});

應該不是嗎？

來源

2011-04-01 14:39:26 Alex

這是我在這裏寫的時候的一個錯字。修正了，但問題仍然存在。 – 2011-04-01 15:23:23

當元素的底部值爲頂值時動畫效果

回答

相關問題