Jquery visible selector in combination with fading elements in and out

Question

I am designing a scroll page that has certain effects, such as buttons appearing and dissapearing. The idea is too fade in a button as the user scrolls that section into view, and as the user leaves that area it fades out again.

i have the following jQuery script using the visible class i downloaded:

 // Fade out enquire button on page load.
   $( ".enquireNow" ).fadeOut();
 // Check to see if element is visible when user scrolls
   $(window).scroll(function() {
       if ($('.miniCity').visible()) {
          $( ".enquireNow" ).fadeIn();
        }
   });

First of all is this best practice, are there better ways to achieve this? Second, how do i make the button dissapear again when the element scrolls out of view?

http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — Ram, May 22 '14 at 05:07

score 1 · Answer 1 · answered May 22 '14 at 04:58

1

Try to use the .is() function along with :visible selector,

 if ($('.miniCity').is(':visible')) {

answered May 22 '14 at 04:58

Rajaprabhu Aravindasamy

66,513
17
101
130

this checks css visible property or element is in the current area which is displayed? – Ehsan Sajjad May 22 '14 at 04:59
Closing parenthesis of if is missing – Adil May 22 '14 at 04:59
hmmm it seems that your answer, is always true, even when it is not in the viewport. – RHK-S8 May 22 '14 at 05:18

droymanz · Accepted Answer · 2014-05-22T05:35:28.380

1

Try this one,

if($('.miniCity').visible(true)){
    $(".enquireNow").fadeIn();
}

edited May 22 '14 at 05:35

answered May 22 '14 at 05:25

droymanz

343
8
18

Jquery visible selector in combination with fading elements in and out

2 Answers2