jQuery的動畫沒有采取變形easing

我試圖做一個規模動畫時有問題。我有一個視頻元素作爲背景，並在開始時將它縮放到（1,1）。當鼠標在Y軸上移動時，我已將文檔中的鼠標移動到文檔中以獲得位置和縮放視頻，它會相應地縮放，如放大和縮小效果。然而，我一直在試圖實施寬鬆的選擇，但它只是擴大沒有影響。這裏是我的代碼jQuery的動畫沒有采取變形easing

$(document).mousemove(function(event) { 
    var pos = (event.pageY/4000); 
    $("#bgvid").animate({ 
     transform: pos 
     }, 
     { step: function(now, fx) { 
       $(this).css('-webkit-transform', 'scale('+ (1+pos) +','+ (1+pos) +')'); 
     }, 
     duration: '100', 
     queue:false, 
     easing:'swing' 
    }); 
});

所以，它的作用是每當光標進入在Y軸的文檔和移動時，它開始從1擴展到（1 +值）時，我將光標向下移動/向上尺度的<video>元件。但它沒有采取寬鬆政策。

我想實現的目標與本網站相似。

http://admirhadzic.com/#/project/kamui

解決方法通過@ntgCleaner

我的jQuery

$(document).mousemove(function(event) { 
    var pos = (event.pageY/50); 
    var wid = 120+pos; 
    $('#bgvid').stop().animate({ 
     width : wid+'%', 
     left: -(pos/2)+'%' 
    }, 400,false,'swing'); 
});

元素的CSS

video.fullscreen { 
      position: absolute; 
      top:0; 
      left: 0; 
      right:0; 
      bottom: 0; 
      width: 120%; 
      z-index:1; 
     }

來源

2016-09-30 Wang' l Pakhrin

不知道究竟在何處您的問題所在，但你嘗試過使用'.stop（）'你的動畫？ '$（ '＃bgvid'）。停止（）。動畫（..）'。您可能會因爲鼠標移動而冒泡動畫？ – ntgCleaner

@ntgCleaner，它做同樣的事情。有什麼可以做其他技術來做到像我鏈接到的網站？ –

你需要使用比例嗎？你可以製作一個容器內的視頻100％寬度，你可以使用寬度和高度進行縮放嗎？ – ntgCleaner

這樣的建議，我做了一個fiddle for you here。

我所做的是爲您想要縮放的東西製作一個容器，然後我使用CSS width來縮放容器。我還在正在動畫的容器上添加transition效果，以便隨意調整。

HTML

<div class="box-container"> 
    <div class="box"></div> 
</div>

$(document).on('mousemove', function(e){ 
    var mouseY = e.pageY; 
    $('.box-container').css({"width":mouseY+"px"}); 
})

CSS

.box-container { 
    width:200px; 
    position:relative; 
    transition:all 400ms ease-out; /* NOTE THIS LINE HERE FOR EASING */ 
} 
.box-container:after { 
    content:""; 
    display:block; 
    padding-top:100%; 
} 
.box { 
    position:absolute; 
}

來源

2016-09-30 21:06:03 ntgCleaner

動畫工作，但如何使它從中間放大，而不是從左上側？ –

這將需要一點數學。你需要動畫寬度和左側位置，我不知道你是如何在第一個地方集中容器。您基本上必須添加到寬度並從左邊位置 – ntgCleaner

減去該數量的一半，因爲我已將它放在絕對位置。確定減去左邊的位置，但我把它作爲寬度的百分比。所以一半的百分比是 - （左％）?? –

jQuery的動畫沒有采取變形easing

回答

相關問題