SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Add a class then do something to the class (JQuery)

    Hi all, I'm just starting out with JQuery so this may be easy.

    I want to add a class to an element when you hover over (so it can be targeted with the next bit) it then do something to that element (animate, fade etc) then the class is removed ready to be applied to another similar element.

    But it all needs to happen on the initial hover (apart from the class being removed obviously)

    Does that make sense?

    This is what I have so far that is adding and removing the class...

    Code JavaScript:
    $(document).ready(function () {
    $("p#jtest a").mouseover(function () {
          $(this).addClass("selected");
        });
     
    $("p#jtest a").mouseout(function () {
          $(this).removeClass("selected")
        });
    });

    Thanks

  2. #2
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why bother adding or removing the class? Why not just tie the functionality to the hover event? Adding a class only makes sense if you're doing something to that class with CSS.

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm good call, basically I want to try and fade in and out the tooltip that appears when you hover over a link. See this page look at the map on the right hand side, hover over a link underneath the map (or on one of the tiny dots) to see the tooltip. You can see how its brought in here I'm open to suggestions

  4. #4
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    $("p").hover(function(){ 
      $(this).addClass("hover"); 
    },function(){ 
      $(this).removeClass("hover"); 
    });

    http://jquery.bassistance.de/api-bro...nctionFunction

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @whisher I think I need more than that and from what vanishdesign is saying I might not even need to add a class. Just add effects to the over state. The reason I thought I was going to need a class adding is that the element I want to effect will have the same selector as a number of other similar elements in a list so if I target it the effect will happen to all of them.

  6. #6
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    @whisher I think I need more than that and from what vanishdesign is saying I might not even need to add a class. Just add effects to the over state. The reason I thought I was going to need a class adding is that the element I want to effect will have the same selector as a number of other similar elements in a list so if I target it the effect will happen to all of them.
    I'll have a shot
    not sure what are looking for so
    with this simple code you can learn
    more about jquery

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="author" content="">
    <title>Animate</title>
    <style type="text/css">
    * {
    	margin: 0;
     	padding: 0;
        outline: none;
    }
    body {     
       	text-align:center;
    	color: #111111;
    }
    #container{
    	position: absolute;
    	width: 0;
    	height: 0;
    	background-color: #517CE0;
     	display: none;
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
    $(function(){
    	$('a').hover(
    			function(){ 
    					var ref= $('#container');
    					var extraSpace= 10;
    					var pos= this.offsetLeft + extraSpace;
    					ref.css('left',pos+'px');
    					ref.animate(
    	    			{ height: 200,width:200}, // what we are animating
    	    			'slow', // how fast we are animating
    	    			'swing', // the type of easing
    	    			function() { // the callback
    	        			//alert('done');
    	    			});
    			},
    			function(){ 
      				var ref= $('#container');
      					ref.animate(
    	    			{ height: 0,width:0}, // what we are animating
    	    			'slow', // how fast we are animating
    	    			'swing', // the type of easing
    	    			function() { // the callback
    	        			ref.hide();
    	    			});
     
    			}
    	);
    }); 
    </script>
    </head>
     
    <body>
    <a href="#">event hover</a>
    <div id="container">Tip</div>
     
     
    </body>
    </html>
    Last edited by whisher; Mar 21, 2009 at 02:38.

  7. #7
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for the sake to play around with jquery

    Code JavaScript:
    $(function(){
    	$('a').hover(
    			function(){ 
    					var ref= $('#container');
    					var x= this.offsetLeft + $(this).outerWidth();
    					var y= this.offsetTop + $(this).outerHeight();
    					ref.css('left',x+'px');
    					ref.css('top',y+'px');
    					ref.text($(this).attr('title'));
    					ref.stop().animate(
    	    			{ height: 200,width:200}, // what we are animating
    	    			'slow', // how fast we are animating
    	    			'swing', // the type of easing
    	    			function() { // the callback
    	        			//alert('done');
    	    			});
    			},
    			function(){ 
      				var ref= $('#container');
      					ref.stop().animate(
    	    			{ height: 0,width:0}, // what we are animating
    	    			'slow', // how fast we are animating
    	    			'swing', // the type of easing
    	    			function() { // the callback
    	        			ref.hide();
    	    			});
     
    			}
    	);
    });
    Last edited by whisher; Mar 22, 2009 at 14:44. Reason: tips http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup


Bookmarks

Posting Permissions

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