Jquery if & else statement for visible and hidden

Djsquid · 09-25-2011, 09:56 AM

Hey all,

I'm working on a summer project for university, and I am 99% finished on it, there is just one small thing that I am stuck on;

I have a navigation system with a sub menu within one of the anchors, the sub menu has fadeIn on it when you click on the anchor, and so what I am after is;

When the sub menu is visible, I need the homepage opacity to drop to 25%, and when the sub menu is hidden I need the homepage opacity to come back to 100%

I thought this was possible through an If, else statement but as I am a novice I am unsure of this, and so far got this;

Code:

$("#cat").click(function(){
 if ($('.sub1').is(':visible') ) {
 $(".homepage").fadeTo(500, .25);}

 else {
 $(".homepage").fadeTo(500, 1);

 }

I have also tried this via .CSS which partially works, when the sub menu is visible the Homepage opacity drops but then when I click #cat and the sub menu is hidden, the homepage won't come back to 100% opacity ;

Code:

$("#cat").click(function(){
    if ($('.sub1').css('opacity') == .25 ) {  

        $('.homepage').fadeTo(500, 1);

    } else {

        $('.homepage').fadeTo(500, .25); 
    }
});

DesignerBill · 09-26-2011, 03:14 PM

Could this help: http://api.jquery.com/toggle-event/

Krocker360 · 09-28-2011, 06:18 AM

Quote:

Originally Posted by DesignerBill

Could this help: http://api.jquery.com/toggle-event/

might help, I suggest w3school

09-25-2011, 09:56 AM	#1
Djsquid New Member Join Date: Aug 2011 Location: Staffordshire Posts: 3	Jquery if & else statement for visible and hidden Hey all, I'm working on a summer project for university, and I am 99% finished on it, there is just one small thing that I am stuck on; I have a navigation system with a sub menu within one of the anchors, the sub menu has fadeIn on it when you click on the anchor, and so what I am after is; When the sub menu is visible, I need the homepage opacity to drop to 25%, and when the sub menu is hidden I need the homepage opacity to come back to 100% I thought this was possible through an If, else statement but as I am a novice I am unsure of this, and so far got this; Code: $("#cat").click(function(){ if ($('.sub1').is(':visible') ) { $(".homepage").fadeTo(500, .25);} else { $(".homepage").fadeTo(500, 1); } I have also tried this via .CSS which partially works, when the sub menu is visible the Homepage opacity drops but then when I click #cat and the sub menu is hidden, the homepage won't come back to 100% opacity ; Code: $("#cat").click(function(){ if ($('.sub1').css('opacity') == .25 ) { $('.homepage').fadeTo(500, 1); } else { $('.homepage').fadeTo(500, .25); } });

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

09-26-2011, 03:14 PM	#2
DesignerBill Silver Member Join Date: Jul 2011 Posts: 146	Could this help: http://api.jquery.com/toggle-event/