CODEWITHSUNDEEP
jqueryhtmlcss
RHK-S8
RHK-S8

Reputation: 329

Jquery visible selector in combination with fading elements in and out

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?

Upvotes: 0

Views: 93

Answers (2)

droymanz
droymanz

Reputation: 343

Try this one, 

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

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

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

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

Upvotes: 1

Related Questions