SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple Jquery question

    I basically have this code currently:

    HTML Code:
    <div class="item">
      <a href="#"><img class="thumb" src="pic.jpg"></a>
    </div>
    When I use the following Jquery code, it works and fades the entire div.

    Code JavaScript:
    $(document).ready(function() {
    	$("div.item").fadeTo("slow", 0.7);
    	$("div.item").hover(function() {
    		$(this).fadeTo("slow", 1.0);
    		},function(){
    			$(this).fadeTo("slow", 0.7);
    	});
    });

    However, I only want to fade the <img> so I tried this:

    Code JavaScript:
    $(document).ready(function() {
    	$(".thumb").fadeTo("slow", 0.7);
    	$(".thumb").hover(function() {
    		$(this).fadeTo("slow", 1.0);
    		},function(){
    			$(this).fadeTo("slow", 0.7);
    	});
    });

    The thumb class is only applied to that img. It does not work. What am I doing wrong?

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The code looks correct. My guess would be you have some other issue. Try making a working html page that demonstrates the issue. Make it as minimal as possible. You'll probably figure out your issue while preparing it.

    btw- what's the purpose of the <a> tag?

  3. #3
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The original code is actually a part of a WP theme so the # is actually some PHP.

    I tested it out and it is not working. I made a basic html page and switched the codes. Only works when it's a div. I even put the .thumb in the <a> instead and nothing. Hm.

    I have another question. The code entails a <img> tag however when I view it in Firebug, it turns that <img> into a div with a background-image. However when I do a traditional "view source" it's just an <img> tag again. Does anyone understand why that is? I sense this is the actual problem.

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rpeg View Post
    I tested it out and it is not working. I made a basic html page and switched the codes. Only works when it's a div. I even put the .thumb in the <a> instead and nothing. Hm.
    Great. Go ahead and post that.

    Quote Originally Posted by rpeg View Post
    I have another question. The code entails a <img> tag however when I view it in Firebug, it turns that <img> into a div with a background-image. However when I do a traditional "view source" it's just an <img> tag again. Does anyone understand why that is? I sense this is the actual problem.
    You probably have some javascript which modifies the page. This is exactly the reason i said to make a minimal demonstration. Pretend you have entered a contest, and the goal is to use the least amount of characters to demonstrate your problem. The end result should be very small.

  5. #5
    SitePoint Addict
    Join Date
    Sep 2009
    Posts
    316
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you were right. I didn't simplify the code thoroughly enough and apparently it was this "baseline img" JS fix that messed it up. Damn, that delayed me. Thanks.

    http://estevancarlos.com/wp-content/...ecv6/test.html


Tags for this Thread

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
  •