Optimize jQuery code

Question

I've written this jQuery code that fades in a overlay with some links over an image. What i found out is that it is painfully slow when I add like 10 of these images. I would really appreciate some tips and tricks on how to make this code faster.

If you have some tips for my HTML and CSS that would be great too ;)

jQuery code

$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
  function () {
      $(this).children(".download").fadeTo("fast", 1);
      $(this).children(".hud").fadeTo("fast", 0.7);
  }, 
  function () {
      div.fadeTo("fast", 0);
  }
);
});

All the code

<style type="text/css">
a:active {
    outline:none;
}
:focus {
    -moz-outline-style:none;
}
img {
    border: none;
}
#backgrounds {
    font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif;
    margin: 50px 0 0 0;
    padding: 0;
    width: 585px;
}
.thumb {
    margin: 5px;
    position: relative;
    float: left;
}
.thumb img {
    background: #fff;
    border: solid 1px #ccc;
    padding: 4px;
}
.thumb div {
    display: none;
}
.thumb .download {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 0 10px;
}
.thumb .download h3 {
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 13px;
    text-align: center;
}
.thumb .download a {
    font-size: 11px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 16px;
}
.thumb .download a:hover {
    text-decoration: underline;
}
.thumb .download .left, .thumb .download .right {
    width: 44%;
    margin: 0;
    padding: 4px;
}
.thumb .download .left {
    float: left;
    text-align: right;
}
.thumb .download .right {
    float: right;
    text-align: left;
}
.thumb img, .thumb .hud {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.thumb .hud {
    width: 100%;
    height: 110px;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

<script type="text/javascript">
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
  function () {
      $(this).children(".download").fadeTo("fast", 1);
      $(this).children(".hud").fadeTo("fast", 0.7);
  }, 
  function () {
      div.fadeTo("fast", 0);
  }
);
});
</script>

<div id="backgrounds">


<div class="thumb">
    <div class="download">
    <h3>Download wallpaper</h3>
    <p class="left">
    <a href="1024x768.jpg">1024x768</a>
    <a href="1280x800.jpg">1280x800</a>
    <a href="1280x1024.jpg">1280x1024</a>
    </p>
    <p class="right">
    <a href="1440x900.jpg">1440x900</a>
    <a href="1680x1050.jpg">1680x1050</a>
    <a href="1920x1200.jpg">1920x1200</a>
    </p>
    </div>
    <div class="hud"></div>
    <img alt="image" src="thumb.jpg"/>
</div>



</div>

Answer 1

I've put your code into a test page and to be perfectly honest, even with thirty or so .thumb divs it seemed ok - certainly responsive enough to use from my end. Sliding the mouse over a bunch of them means I have to wait for the rollover effect to go through them all which takes a while until it gets to the one I've actually stopped on, but surely that was what you wanted given that you're using 'hover' rather than 'click' (which would certainly remove any speed issues).

I'm not using actual images in my test page, just getting the alt text, so my best current guess would be to make sure all images you're loading are as small filesize as you can possibly make them.

Answer 2

I got it to respond a little better by simply changing the following within the hover(..):

  function () {
    $(".download", this).fadeTo("fast", 1);
    $(".hud", this).fadeTo("fast", 0.7);
  }, 
  function () {
    $(".download, .hud", this).fadeTo("fast", 0);
  }

The biggest difference comes from only applying the hoverout effect to the event target, no need to reapply to all your divs on the page.

Answer 3

Pre-Select MORE

Good job preselecting the div. Try this way so that it pre-selects the fade in elements as well instead of doing it on hover:

 $().ready(function() {
    var div = $(".thumb").find("div");
    div.fadeTo(0, 0);
    div.css("display","block");

    $(".thumb").each(function() {

      var download = $(this).children(".download");
      var hud = $(this).children(".hud");

      $(this).hover(
        function () {
            download.fadeTo("fast", 1);
            hud.fadeTo("fast", 0.7);
        }, 
        function () {
            div.fadeTo("fast", 0);
        }
      );

    });

  });

Answer 4

try removing the :focus { -moz-outline-style:none; } and see what happens