Issue with .fadeOut, .fadeIn with Bootstrap hidden class

[Spunky]

Ok so I have the following JQuery:

$('.bkbtnHome').click(function(e) {    $('.HomeRegion').not($(':hidden')).fadeOut('slow', function() {        $(".m2Details,.m3Details,.m4Details,.m5Details,.m6Details,.bkbtn").css("display", "none");        $(".m1Details").css("display", "block");        $(".noQuery").css("display","none");        $("#buildingHeader").html("Group Health Cooperative - Trammell");        $('div#m1Map').fadeIn('slow');    });});

Works beautifully but I recently noticed that a 2nd element with the class .bkbtnHome isn't working the same as the 1st.

 

Here is the 1st:

<li class="bkbtn .bkbtnHome"><a href="#"><img src="img/icon_arrowl.png" height="15px" width="15px">Return</a></li>

And 2nd:

<span class="bkbtn hidden-sm hidden-md hidden-lg .bkbtnHome"><a href="#"><img src="img/icon_arrowl.png" height="15px" width="15px">Return</a></span>

The difference is that the 1st is always visible and the 2nd is only visible on xs device/screen.

 

On an xs device, the .HomeRegion elements are not visible, they have .hidden-xs applied to them. Sooo, what happens is that since the JQuery is looking for hidden elements and fadingOut the one that isn't, it isn't finding anything and is stopping, rather than continuing the code.

 

Before I started using the .not hidden stuff, the code would run fine on xs device/screen, and it was nice that I didn't have to treat both back buttons different. But I can't individually .fadeOut each element needed without causing another problem that I had fixed by using this method.

 

Is there a way to fix this with the current code? Or will I have to add code that treats the 2nd back button differently than it treats the 1st?

[justsomeguy]

It's only going to run that function after the animation finishes, so if there's no animation then it's not going to execute that code.

[dsonesuk]

Not sure exactly what you mean, but also you do know you have period for class within value of class attribute.

 

try

 

.not($('.HomeRegion:hidden, .HomeRegion.xs-hidden:visible'))

 

homeregion that are visible homeregion.xs-hidden that are hidden

 

should work i think

[dsonesuk]

OR maybe

$('.HomeRegion:visible, .HomeRegion.xs-hidden:hidden').fadeOut('slow', function() {

[Spunky]

It's only going to run that function after the animation finishes, so if there's no animation then it's not going to execute that code.

 

You have a nofun habit of reiterating the conclusion that I state in my post, happened with my last post on here.

 

I know that it is going to run that function after the animation finishes.

 

Sooo, what happens is that since the JQuery is looking for hidden elements and fadingOut the one that isn't, it isn't finding anything and is stopping, rather than continuing the code.

 

I came up with that conclusion already and now I am having a hard time figuring out how to resolve it, hoping for some help.

[Spunky]

Not sure exactly what you mean, but also you do know you have period for class within value of class attribute.

 

try

 

.not($('.HomeRegion:hidden, .HomeRegion.xs-hidden:visible'))

 

homeregion that are visible homeregion.xs-hidden that are hidden

 

should work i think

 

 

 

OR maybe

$('.HomeRegion:visible, .HomeRegion.xs-hidden:hidden').fadeOut('slow', function() {

 

 

Unfortunately I tried both these and they didn't work. But I see where you are going with this. (I did make sure to change .xs-hidden to hidden-xs from your code) and in regards to the period for class within the value of the class attribute..that was a mistake on my part posting it in here. These all are pieced together using AngularJS which I was trying to clear up to just give the raw code, so no worries there.

 

I do have a question in regards to your suggestions. Isn't the whole problem that something forced to be hidden can't fadeIn and thus won't fadeOut? I mean, I know we are targeting the hidden elements directly but the whole problem is theres still nothing to fade! Least that's the way it seems. Cuz the new code is working the same as my code: works when the maps are visible, doesn't do anything, no error, on "mobile". I may just have to target the "mobile" back buttons separately, they are, after all, essentially doing a different task. Thanks again for your help.

[justsomeguy]

I came up with that conclusion already and now I am having a hard time figuring out how to resolve it, hoping for some help.

Well, you can't assume that the animation will run then, can you? How about checking for the existence of those elements and, if they are not there, you run the code that would have run if they were there?

[dsonesuk]

Its difficult to visualize the layout and the hierarchy of these elements, and how you want this to work.

 

To me, you want .HomeRegion elements that are visible to fadeOut, and HomeRegion using hidden-xs that are hidden to run the code that uses display: none, display: block, of specific classes, show header text, and fadein div#m1Map, But! the fadeOut of HomeRegion.hidden-xs won't be take place as it is already hidden and instantly runs the show/hide function.

 

I put together a rough layout using just multi coloured boxes representing the classes for fadeIn/fadeOut and hide/show and tested by removing all fadin/out with only the one with class hidden-xs which was hidden with display: none; when browser width was below 400px; when tested it still worked, if i remove HomeRegion.hidden-xs:hidden, it failed. So as far as i can make it does what you ask, it works normally with '.HomeRegion:visible' and when mobile media query kicks in to hide element with '.HomeRegion.xs-hidden' it will target this element if hidden and run the remaining code (not including the fadeOut part).

 

If this is not what you want i suggest you supply link to site, or to a small working example on what you currently have.

Edited May 5, 2015 by dsonesuk