Animating width with jQuery

Question

Hello everyone,

    $(".textF").animate({width: actualWidth + "px"}, durations[0]*1000);

Fast question. This works because I got it with jQuery. But I have a lot of spans with that class and if I do it this way doesn't work:

    var fElements=document.getElementsByClassName("textF");
    fElements[0].animate({width: actualWidth + "px"}, durations[0]*1000);

The error I get:

Uncaught DOMException: Failed to execute 'animate' on 'Element': Partial keyframes are not supported.

I mean you included `jQuery`, so why you tired to use `getElementsByClassName` instead of `$('...')`? — Mehdi Dehghani, May 05 '17 at 13:30
Because it didn't create my "var fElements" as an Array. Using getElementsByClassName did — David Pradell Casellas, May 05 '17 at 13:34
I think I got you. I mean, i tried to get all my span elements into an array using `var fElements=$("textF");`, but trying to print its length said undefined. That's why I used javascript. Anyway, thanks ;) — David Pradell Casellas, May 05 '17 at 13:40

prasanth · Accepted Answer · 2017-05-05T13:26:23.167

4

jquery not working with native javaScript function .

Error?- animate() is defined by jquery not with native Javascript

Refer the animate() jquery documentation

$(fElements[0]).animate({width: actualWidth + "px"}, durations[0]*1000);

or

$(fElements).eq(0).animate({width: actualWidth + "px"}, durations[0]*1000);

edited May 05 '17 at 13:26

answered May 05 '17 at 13:22

prasanth

There is no need to use `px` in `animate` function. the default unit is pixel. – Mehdi Dehghani May 05 '17 at 13:25
Thanks! I really appreciated. What's the difference though? I don't really get it. I know it's about DOM elements but... – David Pradell Casellas May 05 '17 at 13:26
@DavidPradellCasellas because jquery declaration is different from native js declaration .Better see this thread for more clarity about that [difference between dom and jquery](http://stackoverflow.com/questions/6974582/jquery-object-and-dom-element) – prasanth May 05 '17 at 13:33
Thank you very much – David Pradell Casellas May 05 '17 at 13:37
@DavidPradellCasellas always welcome..Keep learning ..Happy coding..:-) – prasanth May 05 '17 at 13:37

1 Answers1