www.webdeveloper.com
Results 1 to 5 of 5

Thread: Jquery 'conditional' mouse events...

Hybrid View

  1. #1
    Join Date
    Apr 2009
    Posts
    60

    Jquery 'conditional' mouse events...

    Hello

    I'm using jquery to create a nice animated hover effect on a set of links. When a mouse hovers over a link it fades out a main div (#content) and fades in another (depending which link is hovered on). On mouseout the 'new' div fades out and the original (#content) fades back in again. What I need is a way to make the #content fade in/out conditional. I suppose I need to add a clause that states something like "Fade the #content div in IF it's alpha is zero, else do nothing? Likeswise, fade the #content div out IF the alpha is 100%? Anybody got any ideas on how to achieve this?

    Here's my current code:

    Code:
    /* Hides the link floating divs */
    jQuery(document).ready(function() {
    	jQuery('#sideNav #subText1').hide();
    	jQuery('#sideNav #subText2').hide();
    	jQuery('#sideNav #subText3').hide();
    });
    
    /* Fades in the hidden floating divs */
    $(document).ready(function(){
      $("#sideNav li #trigger1").mouseover(function(){
        $("#sideNav #subText1").fadeIn(200);
      });
      $("#sideNav li #trigger2").mouseover(function(){
        $("#sideNav #subText2").fadeIn(200);
      });
      $("#sideNav li #trigger3").mouseover(function(){
        $("#sideNav #subText3").fadeIn(200);
      });
      /* Fades out the floating divs */
      $("#sideNav li a").mouseout(function(){
        $("#sideNav .pop-up").fadeOut(100);
      });
    });
    
    /* Fades out the main content div (or fades it in) */
    jQuery(document).ready(function() {
    	jQuery('.trigger').hover(function() {
    		jQuery('#content').fadeOut(100);
    		},
    	function() {
    		jQuery('#content').fadeIn(100);
    		});
    });
    Any help greatly appreciated!

  2. #2
    Join Date
    Apr 2009
    Posts
    60
    OK, I've worked out how to do this but now realise that it doesn't achieve the effect I need!

    This is a hard one to explain but I'll try.
    [dead url removed]
    What I'd like is for the three 'links' on the left to fade out the main text and fade in a new div on rollover, then fade the new div out and the original back in again on mouseout. This works to a point but is a bit messy because if you move the cursor over the links quickly it doesn't always fade the 'main' text back in again. I'm happy with the way the new divs appear, it's just controlling the fadeOut/fadeIn of the main centre text (the text that first appears in the page).

    Does that make sense? Does anybody have any ideas?!
    Last edited by TheBearMay; 05-13-2012 at 09:21 PM.

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    Code:
    <script type="text/javascript">
    //src="scripts/showDiv3.js"
    
    /* Hides the Left side floating divs */
    /*jQuery(document).ready(function() {
    	jQuery('#sideNav #subText1').hide();
    	jQuery('#sideNav #subText2').hide();
    	jQuery('#sideNav #subText3').hide();
    	jQuery('#sideNav #subText4').hide();
    	jQuery('#sideNav #subText5').hide();
    	jQuery('#sideNav #subText6').hide();
    });*/
    
    /* Fades in the hidden floating divs */
    $(document).ready(function(){
    $('*[id*=subText]').hide();
    $('*[id*=trigger]').mouseover(function(){
    var div=$(this).parent().find('div');
    $('#content').fadeTo(100,0.2,function(){div.fadeIn('fast');});
    });
    $('*[id*=trigger]').mouseout(function(){
    var div=$(this).parent().find('div');
    $('#content').fadeTo(100,1,function(){div.fadeOut('fast');});
    });
    });
     /* $("#sideNav li #trigger1").mouseover(function(){$("#sideNav #subText1").fadeIn(200);});
      $("#sideNav li #trigger2").mouseover(function(){$("#sideNav #subText2").fadeIn(200);});
      $("#sideNav li #trigger3").mouseover(function(){$("#sideNav #subText3").fadeIn(200);});
      $("#sideNav li #trigger4").mouseover(function(){$("#sideNav #subText4").fadeIn(200);});
      $("#sideNav li #trigger5").mouseover(function(){$("#sideNav #subText5").fadeIn(200);});
      $("#sideNav li #trigger6").mouseover(function(){$("#sideNav #subText6").fadeIn(200);});*/
      /* Fades out the floating divs */
      /*$("#sideNav li a").mouseout(function(){
        $("#sideNav .pop-up").fadeOut(100);
      });*/
    
    
    /* Fades out the main content div (or fades it in) */
    
    
    /*jQuery(document).ready(function() {
    	jQuery('.trigger').hover(function() {
    	if($('#content').css('opacity') == 1) {
    		jQuery('#content').fadeTo(300, 0);
    		}
    		},
    	function() {
    		if($('#content').css('opacity') < 1) {
    		jQuery('#content').fadeTo(300, 1);
    		}
    		}
    		);
    });*/
    
    </script>

  4. #4
    Join Date
    Apr 2009
    Posts
    60
    All I can say is WOW! Thank you Padonak!!

    So most of my code was redundant then? People like you make it look so easy (but it isn't), and I really appreciate the time you've spent on this for me.

    I love the way this works... almost Flash-like which is what I was trying to achieve.

    I owe you one Padonak ... thank you again

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    good to hear )) scripting is easy, i wish you saw me making water pipes ha-ha-ha

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles