Sliding thumbnail links

Here's my take at a sliding thumbnail link with jquery.

Edit (02/04/09) : removed the first line in the first hover section with the .siblings() selector and set the queue parameter to false in the animations, otherwise the thumbnails could animate themselves for hours if you moved your mouse over them quickly ;)

Javascript:

$('.subsections .subsection_item').each( function(i,el) {
  var thislink = $(this).find('a');
  var url = $(thislink).attr('href');
  $(thislink).click(function(e){
    e.preventDefault();
  });
  if (url) {
    $(this).click(function(){
      window.location = url;
    });
  }
  var item_thumb = $(this).find('.item_thumb');
  var thumb_width = item_thumb.width();
  $(item_thumb).css({'width':0,'opacity':0});
  $(this).hover(
    function() {
      $(this).find('.item_thumb').animate({
        'width': thumb_width,
        'opacity': 1
      }, {
        'duration': 'normal',
        'queue': false
      });
    },
    function() {
      $(this).find('.item_thumb').animate({
        'width': 0,
        'opacity': 0
      }, {
        'duration': 'normal',
        'queue': false
      });
    }
  );
});

HTML:

<div class="subsections">
  <div class="subsection_item">
    <div class="item_thumb float">
      <img src="thumb.png" alt="thumbnail" width="60" height="60"/>
    </div>
    <div class="item_title float">
      <a href="http://www.caktux.ca/">
        Floated title
      </a>
    </div>
    <div class="clear">&nbsp;</div>
  </div>
</div>

CSS:

/* My classic float class since 1932 */
.float {
  float: left;
  display: inline;
}
.subsections {
  padding: 10px 0px 0px 10px;
}
.subsections .subsection_item {
  cursor: pointer;
}
.subsections .item_thumb {
  padding-left: 10px;
  width: 60px;
  height: 60px;
  background-color: #000;
}

caktux putting things together

Sliding thumbnail links

Comments

Go on, give us a demo!

lately...

hey!

Using something I did and made a few bucks out of it?