我會先說我最初的問題很難重現。下面簡要解釋我的問題，問題在底部。
所以我在一個專案中使用了 Jquery multislider。這是它的鏈接：Multislider
現在我的問題是移動元素的影片似乎滯后......有時。它跳躍而不是平穩移動。元素的作業方式是將animate()方法應用于第一項并將行內margin-left屬性應用于第一項.item
通過一些研究，我發現 CSS 影片在margins用于影片時經常會導致問題（在一些其他屬性中，如頂部/底部/左側/右側，以及高度/寬度），并且使用transform更可取。到現在為止還挺好。
這是創建影片的 javascript 中的片段：
function singleLeft(){
isItAnimating(function(){
reTargetSlides();
$imgFirst.animate(
{
marginLeft: -animateDistance /* This is the part that causes me problems */
}, {
duration: animateDuration,
easing: "swing",
complete: function(){
$imgFirst.detach().removeAttr('style').appendTo($msContent);
doneAnimating();
}
}
);
});
}
function singleRight(){
isItAnimating(function(){
reTargetSlides();
$imgLast.css('margin-left',-animateDistance).prependTo($msContent);
$imgLast.animate(
{
marginLeft: 0
}, {
duration: animateDuration,
easing: "swing",
complete: function(){
$imgLast.removeAttr("style");
doneAnimating();
}
}
);
});
}
現在，如果我理解正確，我必須marginLeft: -animateDistance用 transformX 屬性替換該部分，對嗎？但我無法讓它發揮作用。
所以我的問題是，如何替換marginLeft: -animateDistance部分transform: translateX()并animateDistance在括號之間添加變數？
我試過類似的東西transform: "translateX(-$(animateDistance))"，但這只是完全禁用影片。
我錯過了什么嗎？我也愿意接受其他解決影片滯后問題的建議，這就是我得出的結論。
uj5u.com熱心網友回復：
如果您使用step() ，則可以將影片與 $(this) 和.css()一起使用
let test = "100";
$('div h2').animate({ pxNumber: test }, {
step: function(pxNumber) {
$(this).css('transform','translateX(-' pxNumber 'px )');
},
duration:'slow',
easing: "swing",
complete: function(){
console.log('Animation done');
// doneAnimating();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><h2>Move it</h2></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420531.html
標籤：