有沒有可能使用帶有jQuery屬性的動畫？

我想改變使用jQuery元素的不透明度（在動畫淡入）：有沒有可能使用帶有jQuery屬性的動畫？

$(`#pano-${index}`).animate({ 'opacity': 1})

但我沒有得到我想要的結果：

<a-sky style="opacity: 1;"></a-sky>

我想完成此操作：

<a-sky opacity: 1></a-sky>

是否可以使用jQuery來做到這一點？

注：該作品...但它不具備的動畫：$(#pano-${index}).attr('opacity', 1)

來源

2016-03-07 alex

@Tushar如果我使用引號，$ {}'不會插值。 – alex

作爲首發十，你可以用計時器循環做...

var opacity = 0, // starting opacity 
    step = 0.1, // step size 
    target = 1, // target value 
    time = 50; // delay in milliseconds 
// start timer loop, and record it's index 
var interval = setInterval(function(){ 
    // assuming your selector works, set opacity 
    $(`#pano-${index}`).attr({opacity: opacity}); 
    // increment opacity by step size 
    opacity += step; 
    // if we reached our target value, stop the timer 
    if(opacity >= target){ 
     clearInterval(interval); 
    } 
}, time);

來源

2016-03-07 03:38:27

嘿，它幾乎工作。但有時我會得到這個：'Uncaught TypeError：interval不是一個函數'，並且函數不再工作。 – alex

也許你的代碼中有一個名爲interval的函數 - 嘗試爲索引使用一個不同的變量名，例如'intervalNumber'。 –

順便說一句 - 由於在javascript中處理浮點數的方式很荒謬，因此'0.1 + 0.1 + 0.1'變成了'0.30000000000000004'。爲了使值增加十分之一，你應該做一些荒謬的事情，比如：opacity =（opacity * 10 + step * 10）/ 10;' –

是$("#pano-${index}")在動畫之前的不透明度爲0（或者不是1）？

請參閱this JSFiddle

來源

2016-03-07 03:51:59

有沒有可能使用帶有jQuery屬性的動畫？

回答

相關問題