What Jquery plugin is this?

Question

When a user hover overs one of the items such as Research, Brand Strategy, Audience Engagement the background colour in the bottom section changes via a inline style.

http://www.odopod.com/work/tags/strategy/

I was wondering, how it is done or which Jquery plugin they were using?

Many thanks!

Answer 1

This isn't a plugin, this is done through good old plain jQuery:

<div class='something'>my text goes here blah blah blah</div>
<div class='somethingelse'>my background color goes here</div>

Then with jQuery:

$(function() {
    $('div.something').hover(function() {
        $(this).next('div.somethingelse').css('background-color','red');
    }, function() {
        $(this).next('div.somethingelse').css('background-color','blue');
    });
});

Depending on what you want you could set up the HTML in many different ways. You would then use whatever DOM traversing function is appropriate to find the associated DIV and manipulate it's CSS accordingly.

Answer 2

It's not a plugin:

// global nav effect
$('#global_header li').hover(function(){
  $('div.marker',$(this)).animate({height:3}, 90)
},function(){
  if(false == $(this).hasClass('active'))
  {
    $('div.marker',$(this)).animate({height:0}, 90)
  }
})

$('#global_header li').click(function(){
  $('div.marker',$(this)).addclass('active')
})

That is all it does. It uses hover() and animate().

---

Ok, so that's the script for the global header, but it does roughly the same thing, just affects a different piece.

Answer 3

To animate a background color using jQuery, use the color plugin.