CODEWITHSUNDEEP
javascriptjquery
alex
alex

Reputation: 7601

Is it possible to use animate with an attribute with jQuery?

I want to change the opacity of an element with jQuery (with a fade in animation):

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

But I don't get the result that I want:

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

I want to accomplish this:

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

Is it possible to do that with jQuery?

Note: this works ... but it doesn't have animation: $(#pano-${index}).attr('opacity', 1)

Upvotes: 0

Views: 45

Answers (2)

R. Schifini
R. Schifini

Reputation: 9313

Is $("#pano-${index}") at opacity 0 (or any other than 1) before the animation?

See this JSFiddle

Upvotes: 1

Billy Moon
Billy Moon

Reputation: 58531

As a starter for ten, you could do it with a timer loop...

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

Upvotes: 2

Related Questions