Jquery FadeIn adding display property instead of just removing display:none

Question

I have a list of tasks in HTML..

When a task is done, jquery fadesOut the li, moves it to the bottom of the list, adds the "checked" class, and then fades in.. all good, except when it fades in, it not only removes the display:none property it added with FadeOut but adds an inline style display:list-item (or any other display property the element had when it was hiding)

I need the li to be exactly the same as it was before, so after the fadeIn, I do:

            li.fadeIn(function(){
                //remove display property
                li.css('display', '');
            });

It is working fine, except when the user checks a task too quickly after one task has been checked, then this code does not run, and the element keeps the display property added by Jquery, which is breaking the list because of some other styles I have applied.

My question is either why the fadeIn doesn't run when another (fadeOut/FadeIn) starts too fast, or how could I stop the fadeIn from adding the attribute.

Can include `html` at Question ?, create stacksnippets , jsfiddle http://jsfiddle.net to demonstrate ? — guest271314, Aug 15 '15 at 15:36

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

Similiar to How to fade to display: inline-block

Use jQuery animate to handle hiding and showing of your elements via opacity instead of fadeIn so that your display property is unaffected.

edited May 23 '17 at 11:43

Community

1
1

answered Aug 15 '15 at 15:10

Brad Decker

746
8
20

Jquery FadeIn adding display property instead of just removing display:none

1 Answers1