0

I'm having the oddest issue where I am fading out content on a page, but for some reason some <li> elements aren't playing ball. These elements are children to the elements I'm fading out, so it should fade out just like the rest of the elements contents. I added an <img> to the same parent and it fades out just fine. If I go in through the browser's console to call the li elements directly, like $(".pageDiv li").fadeOut(1000), it works fine. I'm rather flabbergasted.

function emptyPage(el,exArr)
{
    if ($(el).children().length > 1)
    {
        var chld = $(el).children();
        $(chld).each(function (i)
        {
            if ($.inArray($(chld[i]).attr("class"), exArr) == -1)
            {
                $(chld[i]).fadeOut(500, function () { $(chld[i]).remove(); });
            }
        });
    }
}

Here's an HTML example:

<div class="pageDiv" style="display: block; top: calc(10% - 40px);">
    <div class="tab">Videos</div>
    <p>Page Title</p>
    <span>
        Text that Fades
        <br>
        <br><lu><li>Does not fade</li></lu>
        <br>
        <br><img src="https://sd.keepcalm-o-matic.co.uk/i-w600/its-all-going-tits-up.jpg">
        <br>
        <br>Image above fades, as does this text
        <br>
        <br><li>Does not fade</li>
    </span>
</div>

Calling the following function on it: emptyPage($(".pageDiv"), ["tab"]) which otherwise works fine.

I'm probably making a very basic mistake that I'm somehow blind to. Thanks a bunch!

Battle_707
  • 708
  • 5
  • 15
  • Can you show your HTML code please ? – Himanshu Upadhyay Sep 15 '17 at 14:48
  • I tested your code it s working well .. you have only to pass the required element name with `.` to be considered as a class. -->https://jsfiddle.net/amani1988/763pfprL/ – Amani Ben Azzouz Sep 15 '17 at 14:52
  • Added an html sample. @Amani: It indeed works fine with just about anything else I throw at it. It's just these darn list items... :S – Battle_707 Sep 15 '17 at 15:01
  • but it workd also with `li` elements https://jsfiddle.net/amani1988/763pfprL/1/ – Amani Ben Azzouz Sep 15 '17 at 15:06
  • No it doesn't. If you watch it closely (or just set the timeout to 5000), you see that the li parts don't actually fade out. They turn off at the end because the `fadeOut()` function will set the element to `display: none;` after it is done fading. Let me check some other browsers...just to be sure I guess. EDIT: getting the same thing on my phone... – Battle_707 Sep 15 '17 at 15:18
  • 1
    Change the `` to a `
    ` and it works fine. This answer sums up why it doesn't work (summary: `li` is a block element and so can't go in a `span` element which is inline). https://stackoverflow.com/a/11314736/2181514
     – freedomn-m Sep 15 '17 at 15:27
  • Well...I guess I was right to say that it was something basic lol. If you post it as an answer, I can vote it up. Thanks! – Battle_707 Sep 15 '17 at 15:45

0 Answers0