NAF Jquery

I was not sure on what too title this but I though that NAF(non active fading) worked, basically the function below fades out the not active siblings to make the element you are hovered over stand out.

I got this idea after seeing this site. After trying out many ideas and failing I knew there must be a way of selecting the not active siblings. A quick look through my Packt jQuery Reference Guide and I found .not() under the filtering methods.

Given a jQuery object that represents a set of DOM elements, the .not method constructs a new jQuery object from a subset of the matching elements. The supplied selector is tested against each element; the elements that don’t match the selector will be included in the result.

You maybe familiar with the fade in effect which is commonly used today, you can view an example on my portfolio page take a look. I do like this effect and its very easy to accomplish but sometimes its nice to have something different which is why I have put together the following code.

Click here to view the demo

The HTML

This is for just a single item in an unordered list, just to show you the HTML I used. In my example above its the same as below but 8 items so you would actually see how it works.

1
2
3
4
5
6
7
8
9
10
11

<div id="container">
    <ul>
        <li>
          <h2>Moving on</h2>
              <div class="bgcolor">
                <img src="http://www.iamkreative.co.uk/blog/wp-content/uploads/2010/01/img.jpg" alt="image" width="170px">
                  <p>Lorem ipsum dolor amet, consectetur adipiscing elit. Fusce in mauris sed lacus pulvinar lobortis. Nulla consequat lorem a urna sodales congue. Ut ut ornare lacus.</p>
              </div>
      	 </li>
    </ul>
</div>

The Jquery

I found using the jQuery :not(:hover) very easy to create just what I wanted to do, I thought I had cracked it and was feeling good until the dreaded test in IE, nothing, nothing happened at all. I tried changing the CSS, giving the li tags a height and width to give it something solid to hover on but still nothing. While trying to solve this problem I had help from @wireframebox and @36flavours which I am very grateful for, later that evening @36flavours explained that the :not(:hover) only works with browsers where CSS3 is rendered, everything bar IE(surprise, surprise!) Kindly @36flavours rewrote a line in the script to make it work cross browser, the two scripts are very similar, I am going to show you both bits of code for reference.

Lets include the jQuery to the page this link will always give you the latest version so you will not need to keep changing your code.

1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

This is the rewritten code which works cross browser, I have made a note of which is the edited line.

1
2
3
4
5
6
7

	$(document).ready(function(){
		$("#container li").hover(function() {		
		$("#container li").not(this).stop().fadeTo('normal',0.4);//edited line
	},function() {
		$("#container li").stop().fadeTo('normal',1);
	});
});

I thought I would include the original code I had written aswell so you can see what I wrote, when ie9 comes out it should be working fine in that browser. ‘li:not(:hover)’ produces the effect. It does exactly what it says, your selecting the li siblings which are not hovered over and telling them to do something.

1
2
3
4
5
6
7

	$(document).ready(function(){
		$("#container li").hover(function() { //Do something when the #container li are hovered on		
		       $("#container li:not(:hover)").stop().fadeTo('normal',0.4);//Fades the inactive li's to 40% opacity 
	        },function() {
		       $("#container li").stop().fadeTo('normal',1);//Fade back to 100% when not hovered
	});
});

There maybe a another reason why my original piece of code did not work and I would love to hear why. If you have produced this effect before and did not use .not() please tell me how.

Thanks again to these guys, defiantly worth a follow on twitter.
@wireframebox
@36flavours

Hey, my name’s Kevin, I love hockey and the internet. I like my rock music and its great to just plug in and get the designs flowing. I love chicken wings, the more hot sauce on them the better and I have 3 kidneys...You can find me on multiple social networking sites, so come say hi. I hope at least one post on here is useful to you!

• Delicious
• Design Float
• Digg
• stumble
• twitter
• Reddit