CODEWITHSUNDEEP
javascriptjqueryhtmlcss
A.Sharma
A.Sharma

Reputation: 2799

jQuery Element On-Screen Visibility

I'm trying to use the following plugin to determine if an element is visible on the screen and then I want to use a jQuery effect on it:

http://www.teamdf.com/web/194/jquery-element-onscreen-visibility

I am able to get the effect working if the mouse hovers over the region, but now I want the user to experience the effect in the case their mouse doesn't hover over the div region.

Now I have more experience with Java than jQuery so I don't know if the conditional statement works the same way. I have been researching online and all of the plugins don't give an exact example of this so I took a shot in trying it myself in different ways. I am trying to minimize the CSS in this example as well and use only jQuery. Netbeans doesn't give this code an error, but it still doesn't work. Please help me by providing me guidance in this task.. My code is as follows:

<script>
if($('#pledge').visible(true)){

    $('#projectone').stop(true, true).fadeIn({ duration: 700, queue: false }).css('display', 'none').slideDown(700);   
    $('#projecttwo').stop(true, true).fadeIn({ duration: 700, queue: false }).css('display', 'none').slideDown(700);
}

else

   {
    $('#projectone').hide("slide",{direction:"left"},1000);
    $('#projecttwo').hide("slide",{direction:"right"},1000);

   }
</script>

Upvotes: 0

Views: 409

Answers (2)

Maryam Ghafarinia
Maryam Ghafarinia

Reputation: 458

if ( $(element).css('display') == 'none' ){
       // element is hidden
}

Upvotes: 0

vasa
vasa

Reputation: 787

jQuery allows you to check if an element is visible or not in the following way 

$(element).is(":visible")

Try,

<script>
if($('#pledge').is(":visible")){
    $('#projectone').stop(true, true).fadeIn({ duration: 700, queue: false }).css('display', 'none').slideDown(700);   
    $('#projecttwo').stop(true, true).fadeIn({ duration: 700, queue: false }).css('display', 'none').slideDown(700);
} else  {
    $('#projectone').hide("slide",{direction:"left"},1000);
    $('#projecttwo').hide("slide",{direction:"right"},1000);
   }
</script>

Upvotes: 1

Related Questions