SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclude element using jQuery

    I have set up an image gallery that on mouseover the background image fades in and on mouseout fades out. *The problem I am having is that all images fade in and out. *I applied the fade to the .thumbnailbg div element, but now I need to exclude the .thumbnail div element. *How would I do that.

    Code JavaScript:
    // JavaScript Document
    $(function() {
    // do something on document ready
    $(".thumbnailbg").fadeTo("fast", 0.0); // This sets the opacity of the thumbs to fade down to 0% when the page loads
     
    	$(".thumbnailbg").hover(function(){
    		$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    	},function(){
       		$(this).fadeTo("slow", 0.0); // This should set the opacity back to 0% on mouseout
    	$(".thumbnail").addClass(".thumbnail").show(); // This should make the thumbnail show always
    	});
    });
    Last edited by capnhud; Feb 21, 2008 at 06:47. Reason: trying to eliminate the extra markup
    I know I am in my own little world. But its OK "They Know Me HERE"

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    If the thumbnailbg element has a background applied to it, you can only fade the whole element which includes its children.

    If it has an absolutely positioned image instead, that can be used as the background image and targeted separately.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was under the impression that with jQuery you could target select elements and exclude others is that not correct?
    I know I am in my own little world. But its OK "They Know Me HERE"

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Ahh yes, here we go. The not selector
    http://docs.jquery.com/Selectors/not#selector
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot capnhud's Avatar
    Join Date
    Nov 2005
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With that modification all the images here still fade

    Code JavaScript:
    // JavaScript Document
    $(function() {
    // do something on document ready
    $(".thumbnailbg").fadeTo("fast", 0.0); // This sets the opacity of the thumbs to fade down to 0% when the page loads
     
    	$(".thumbnailbg").hover(function(){
    		$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
    	},function(){
       		$(this).fadeTo("slow", 0.0); // This should set the opacity back to 0% on mouseout
    	$(".thumbnail").not(".thumbnail").show(); // This should make the thumbnail show always
    	});
    });
    I know I am in my own little world. But its OK "They Know Me HERE"


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
  •