SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple jQuery traverse question

    Hi,

    I'm using jQuery to animate some images inside divs on a site. Basically I want it so that you roll over a div and the image expands, then roll out and it contracts again. The code looks something like this:

    Code:
    (CSS)
    .expand {
    width: 10px;
    height: 10px;
    background: #f00
    }
    
    
    (Javascript)
    $(document).ready(function(){
    	$(".expand").hover(
    		function(){
    			$(".expand img").animate({ 
    				width: "100px",
    				height: "100px"
    			},400);
    		},
    		function(){
    			$(".expand img").animate({ 
    				width: "10px",
    				height: "10px"
    			},400);
    		}
    	);	
    
    });
    
    
    (HTML)
    <div class="expand"><img src="1.gif" /></div>
    <div class="expand"><img src="2.gif" /></div>
    <div class="expand"><img src="3.gif" /></div>

    This works, except it makes all images expand - I just want to make just the one who's container div is rolled over expand.

    It needs to be done with the div as the control (as opposed to just making the images themselves the trigger) because there are few more things in there to do which make it more complex.

    Thanks for any help folks...

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    change
    Code javascript:
    $(".expand img").
    to
    Code javascript:
    $(".expand").


  3. #3
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks gRoberts, but that will just make the div expand, not the image within. I need to control a couple of other things inside the div independently too, so am looking really for the principal of how to target elements inside a clicked element.

    I have tried:

    Code:
    (Javascript)
    $(document).ready(function(){
    	$(".expand").hover(
    		function(){
    			$(this).children(".expand img").animate({ 
    				width: "100px",
    				height: "100px"
    			},400);
    		},
    		function(){
    			$(this).children(".expand img").animate({ 
    				width: "10px",
    				height: "10px"
    			},400);
    		}
    	);	
    
    });

    But that doesn't work. It must be something to do with putting 'this' as the selectors somewhere but I just can't get the right syntax.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gotcha.. I think using $(this).children("img).animate... will do it. At the moment your $(this).children(".expand img") is looking for all images inside an element which has the expand class.

    Your already in that element, so none of the children will have the expand class.


  5. #5
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That doesn't work unfortunately.

  6. #6
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    UK
    Posts
    605
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it! It's:

    Code:
    (Javascript)
    $(document).ready(function(){
    	$(".expand").hover(
    		function(){
    			$("img",this).animate({ 
    				width: "100px",
    				height: "100px"
    			},400);
    		},
    		function(){
    			$("img",this).animate({ 
    				width: "10px",
    				height: "10px"
    			},400);
    		}
    	);	
    
    });


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
  •