jQuery動畫圖像twiching

我有一個用JS動畫圖像的問題。當我只動畫width和height它工作正常。當我向其添加top/marginTop或left/marginLeft時會發生問題。我想使用它的原因是縮放效果。但我認爲它首先加入width和height，比它增加top/left值。它會產生看起來不好的「抽動」效果，我無法擺脫它。jQuery動畫圖像twiching

這裏工作的例子我簡單的滑塊爲http：//łuckoś.pl/slider/

我什麼都試過，連jQuery.fx.interval = 50;

感謝您的時間

來源

2012-08-01 Trouble

爲了獲得更好的結果，你必須使用CSS屬性類似：

#container{ 
    overflow:hidden; 
    width:489px; 
    height:178px; 
    position:relative; 

} 
#container img{ 
    position:relative; 
    margin:auto; 
    -webkit-transition: all 4s ease-out; 
    -moz-transition: all 4s ease-out; 
    -o-transition: all 4s ease-out; 
    transition: all 4s ease-out; 
} 

#container img.zoom { 
    -moz-transform: scale(2); 
    -webkit-transform: scale(2); 
    -o-transform: scale(2); 
    transform: scale(2); 
    -ms-transform: scale(2); 
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
    M11=2, M12=-0, M21=0, M22=2); 
}

和javascript：

$().ready(function(){ 
    $('img').addClass('zoom'); 
});

當您添加變焦類，圖像在4個secondes比例爲2。

看到完整的演示：http://jsfiddle.net/rNY6T/18/

來源

2012-08-03 07:28:35 tekilatexee

這不是我所需要的，但是謝謝你，我終於有了額外的部分來移動縮放位置，它是'translate（5em，0）;'這樣我可以移動隨機變焦:)謝謝，爲了jsfiddle和你的時間！ – Trouble 2012-08-03 11:14:49

我有一個問題。這種動畫在IE中不起作用（目前正在測試IE 8）。但是'http：// codecanyon.net/item/estro-jquery-ken-burns-slider-wordpress-plugin/full_screen_preview/356713'可以工作，這是我想要的效果。你可以看一下嗎？ – Trouble 2012-08-06 13:43:09

我想你需要使頂部位置的左邊位置和高度成比例地動畫寬度。當你縮小2px的寬度時，你從1px左移。

來源

2012-08-01 08:29:39 tekilatexee

我由圖像的有效計數比率加入的值，加入100寬度即使當移動它50到左（因此它應該留在原處並垂直縮放）它是「抽搐「 – Trouble 2012-08-01 08:51:52

當你需要放大..添加這個..

-moz-transform: scale(2); 
-webkit-transform: scale(2); 
-o-transform: scale(2);

我認爲IE相當於是-ms-transform但我還沒有scale用過它。

來源

2012-08-01 08:31:24

這很好，謝謝，但我仍然無法將放大的圖像移動到頂部/左側。在我的'animate'函數中，隨機移動縮放圖像。 'top/left'是「Twiching」agian – Trouble 2012-08-01 09:00:15

jQuery動畫圖像twiching

回答

相關問題