check if a div becomes visible

Question

If I want to check if a div is visible I use:

if($('#step2').is(':visible')) {

If I use fadeIn() to show the div, it is not visible on page load. What can I use instead of .is to trigger some code? I am thinking about .on() but don't see how

I know I can do it in the callback of fadeIn() but the question is how to do it outside the callback.

Thanks

Use the callback argument of `fadeIn()` to run the code now that the element is visible... https://api.jquery.com/fadein — Rory McCrossan, Feb 04 '21 at 09:42
https://api.jquery.com/fadein/ `.fadeIn(800, function() { /* FADE IN COMPLETED */ })` — Roko C. Buljan, Feb 04 '21 at 09:42
that's not the case. I want to do it outside the fadeIn callback — Lelio Faieta, Feb 04 '21 at 09:54
Can you raise an event in the `fadeIn()`? Or is it about not knowing when .show() / .fadeIn() is called? — freedomn-m, Feb 04 '21 at 10:09
Do you have full control over that `fadeIn` and just want to decouple the code that reacts to the fade in from the code that does the `fadeIn`. If so you could trigger an event in the `fadeIn` callback and listen to that even somewhere else. See [jQuery fadeIn event?](https://stackoverflow.com/questions/8386877) for more details (which also shows how to hook into `fadeIn` to trigger the even for each `fadeIn` that is called.) — t.niese, Feb 04 '21 at 10:12
@freedomn-m it is a wizard. On one side I have the fadeIn on click of the next button. On the other side I have 300 lines of js to execute only when the div becomes visible. 300 for each of the three divs. I don’t want to nest them as a callback for code readibility and for maintenance — Lelio Faieta, Feb 04 '21 at 10:17
`I don’t want to nest them as a callback for code readibility and for maintenance` well you can always keep them in another function, and pass that function as callback `.fadeIn(800, functionForDiv)` or call it in that callback `.fadeIn(800, function() { functionForDiv(); })` — t.niese, Feb 04 '21 at 10:20
"*do it in the callback*" doesn't mean the 300 lines of code need to be placed in that call back - put those lines in a function and call that function (2 methods provided in comment above) — freedomn-m, Feb 04 '21 at 10:30

score 0 · Answer 1 · edited Feb 14 '21 at 23:17

0

As the jQuery example page shows, there is a callback for the fadeIn property, to determine when it is finished fading, if you want to check if it's visible outside of the callback, just set a boolean variable to true, once the callback is called, and check it somewhere else

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="https://api.jquery.com/resources/0042_06_36.png" alt="" width="100" height="123">
<script>
//I just added this (bluejayke)
var isItEvenVisible = false


// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).fadeIn( "slow", function() {
    // Animation complete
    isItEvenVisible = true
  });
});

//somewhere else
if(isItEvenVisible) {
  //stuff
}
</script>

edited Feb 14 '21 at 23:17

Martijn Pieters

1,048,767
296
4,058
3,343

answered Feb 04 '21 at 09:53

B''H Bi'ezras -- Boruch Hashem

3,665
3
33
83

`if(isItEvenVisible)` is no different from `if ($(element).is(":visible"))` - so no need for the additional variable. – freedomn-m Feb 04 '21 at 10:05
I think you've missed the point of the question. OP has stated that they already use `.is(":visible") with *If I want to check if a div is visible I use* (so it does work for them). They're looking to know *when* it becomes visible - ie an event similar to the fadeIn callback but without needing to hook into the callback. – freedomn-m Feb 04 '21 at 10:08
@LelioFaieta so whats the problem with using `:is` then, I thought it didnt work? – B''H Bi'ezras -- Boruch Hashem Feb 04 '21 at 10:09
@freedomn-m how can there be a callback without a callback? – B''H Bi'ezras -- Boruch Hashem Feb 04 '21 at 10:09
It works on page load. I want to listen to the change that is something you do with on. I just need to combine on with the fadeIn event that is my question – Lelio Faieta Feb 04 '21 at 10:10
@freedomn-m OK fine but I don't understand what else could be possible, either there is a callback, which requires a hook for each, or there is a state of checking, which is `:is` or a variable, what other possibility could there be, not only practically, but even theoretically? – B''H Bi'ezras -- Boruch Hashem Feb 04 '21 at 10:10
@LelioFaieta Im having trouble understanding, what do you mean by `combine on with the fadeIn event`? – B''H Bi'ezras -- Boruch Hashem Feb 04 '21 at 10:11

check if a div becomes visible

1 Answers1