Question

我想用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)

Answer 1

作为十人的首发，你可以通过计时器循环来实现......

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);

Answer 2

在动画之前，$("#pano-${index}")处于不透明度0（或除1之外）吗？

请参阅this JSFiddle

是否可以在jQuery中使用带有属性的动画？

2 个答案: