如何讓jQuery動畫看起來流暢？

我很長一段時間都在坐這個動畫，不能認爲它是最好的工作方式。我希望第一個和第二個li物品會慢慢淡出，同時第六個和第七個物品會消失，而所有物品都慢慢向左移動。這裏是我的動畫看起來像，這一點也不像我想.. https://jsfiddle.net/nqo65mcd/2/如何讓jQuery動畫看起來流暢？

jQuery(document).ready(function() { 
    jQuery('.feedbak-logo li').slice(5).hide(); 
}); 

jQuery('.feedbak-logo li').click(function(){ 
    jQuery('.feedbak-logo li[data-number = "1"]').fadeOut({queue: false, duration: '500'}); 
    jQuery('.feedbak-logo li[data-number = "2"]').fadeOut({queue: false, duration: '1000'}); 
    position = 80; 
    jQuery('.feedbak-logo li').animate({queue: false,left: '-='+position+'px'}, 1000); 
    jQuery('.feedbak-logo li[data-number = "6"]').fadeIn({queue: false, duration: '500'}); 
    jQuery('.feedbak-logo li[data-number = "7"]').fadeIn({queue: false, duration: '1000'}); 
});

來源

2016-07-03 Giedidius

嘗試玩弄不透明度而不是淡入淡出;淡入淡出的問題在於它最後會添加一個「display：none」，所以之後的任何元素都會跳起來......動畫不透明度會因淡出和邊距而移動，這會讓您感覺到你想要... – webeno

@webeno現在我明白了。但是現在又出現了另一個問題，我不知道應該如何編輯我的代碼，然後在這裏粘貼，這有點複雜。我需要選擇第一個和最後一個可見的li。在我的情況下，我做了這樣的'var last = jQuery（'。feedbak-logo li：visible：last'）;'。我應該如何做到這一點與不透明？只有在循環中才有可能，或者有沒有更好的方法來做到這一點？ – Giedidius

jQuery的動畫是足夠好，人們都說它的速度慢等，但它是最好的在那裏儘可能瀏覽器的兼容性和性能去。當然，一旦安裝，greensock速度更快，但似乎沒有人計算額外的服務器請求，CSS有跨瀏覽器問題，儘管jquery已經很慢了，但jQuery動畫方法仍然是最好的，中型項目。

代碼的相關部分：

$(document).ready(function() { 
var items = $('.feedbak-logo li'); 
items.slice(5).hide(); 
}); 
var items = $('.feedbak-logo li'); 
items.click(function() { 
items.eq(0).fadeOut(1000); 
items.eq(1).fadeOut(1000); 

items.eq(0).animate({ 
left: 50 
}, { 
duration: 1000, 
step: function(now, fx) { 
    items.gt(0).css("left", now); 
} 
}); 
items.eq(5).fadeIn(1000); 
items.eq(6).fadeIn(1000); 
});

這裏就是一切運行而不會跳動流暢的改進的代碼。

$('#one').click(function(){ 
original(); 
}); 
$('#two').click(function(){ 
backToOriginal(); 
}); 


function original() { 
var items = $('.feedbak-logo li'); 
items.slice(5).css({'opacity': 0}); 

items.eq(0).animate({opacity: 0, left:'-30px'},500); 
items.eq(1).animate({opacity: 0, left:'-30px'},500); 
items.eq(5).animate({opacity: 1},500); 
items.eq(6).animate({opacity: 1},500); 
items.each(function(i) { 
setTimeout(function() { 

    items.removeClass("nonAnimated").addClass("animated"); 
}, 200 * i); 


}); 
} 

function backToOriginal() { 
var items = $('.feedbak-logo li'); 


items.eq(0).animate({opacity: 1, left:'30px'},500); 
items.eq(1).animate({opacity: 1, left:'30px'},500); 
items.eq(5).animate({opacity: 0},500); 
items.eq(6).animate({opacity: 0},500); 
items.each(function(i) { 
setTimeout(function() { 
    items.removeClass("animated") 
    .addClass 
    ("nonAnimated"); 

}, 100 * i); 


}); 
}

的codepen：

http://codepen.io/damianocel/pen/grRaEW

我不知道從哪裏開始，學習jQuery的動畫文件內而外，實在是最少的最壞的所有壞的東西在那裏。當客戶問您爲什麼網站在一半的移動瀏覽器中不起作用時，這一點就變得清晰了。

不要選擇這樣的元素，總是總是緩存DOM元素引用與Jquery，尤其是與動畫。

對於位在本機JS了不同的方法，試試這個：

http://codepen.io/damianocel/pen/PzYXmv

不知道這是否是有用的，但是這是一個非常類似的原生的js實現，我能做些什麼有啊正在尋找爲，但明天。

來源

2016-07-03 19:56:47

感謝您的代碼，在淡入淡出的時候是否可以將元素移動到左側？ – Giedidius

檢查這個，我可以改變這個到你明天尋找什麼http://codepen.io/damianocel/pen/PzYXmv –

你能幫我這個動畫嗎？我已經嘗試過，但不知道如何。 – Giedidius

至於說webeno，你可以嘗試使用.animate({'width': 'toggle'});代替.fadeout()

來源

2016-07-03 18:55:50

我很欣賞信用，但是這個答案還遠遠沒有完成，所以要麼投票了我的意見，加一個問題，或詳細說明... – webeno

這是一個非常簡單的例子與CSS過渡做結合opacity和transform：

https://jsfiddle.net/MattDiMu/t3umvbcx/

編輯：更正網址

edit2：a votedown，不直接提供代碼？好，這裏是......

.fade-in, 
.action .fade-out{ 
    opacity: 0; 
} 
.action .fade-in, 
.fade-out { 
    opacity: 1; 
} 

.action li { 
    transform: translateX(-200%); 
} 

jQuery('.feedbak-logo').click(function(){ 
    $(this).addClass('action'); 
});

來源

2016-07-03 19:02:09 MattDiMu

這是正確的網址？ – Giedidius

@Giedidius thx，你說得對。張貼錯誤的一個:) – MattDiMu

這看起來就像我需要的，謝謝。 – Giedidius

如何讓jQuery動畫看起來流暢？

回答

相關問題