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"></script>

<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>

it's nice to finally see a question with all the relevant code +1 — missaghi
– missaghi, Commented Mar 26, 2009 at 14:57

Mister Lucky · Accepted Answer · 2009-03-26 14:23:45Z

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.

edited Mar 26, 2009 at 14:23

answered Mar 26, 2009 at 14:14

Mister Lucky

4,0832 gold badges22 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sindre Sorhus Over a year ago

What are your thoughts on the solution from rizzle?

Mister Lucky Over a year ago

i applied rizzle's solution and received no performance gains compared to my above code. caching the lookup is interesting, but doesn't get any big gain here. replacing the stored div (that applies to all divs) is the heavy part..

Mister Lucky Over a year ago

I haven't found any so far. Just try using older systems often to see how they respond for the lowest common denominator scenario.

Steerpike · Accepted Answer · 2009-03-26 13:51:17Z

0

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.

answered Mar 26, 2009 at 13:51

Steerpike

17.6k8 gold badges41 silver badges54 bronze badges

Comments

missaghi · Accepted Answer · 2009-03-26 14:54:02Z

0

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);
        }
      );

    });

  });

edited Mar 26, 2009 at 14:54

answered Mar 26, 2009 at 14:40

missaghi

5,1102 gold badges35 silver badges44 bronze badges

3 Comments

Sindre Sorhus Over a year ago

Where are you setting the div variable? Is this faster than Mister Lucky's solution?

missaghi Over a year ago

it's unchanged from the question code, i added it in for you.

Mister Lucky Over a year ago

did you actually run your code rizzle? it responds almost identical to the original code, and provide no optimization?

anon · Accepted Answer · 2009-04-03 19:19:34Z

0

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

answered Apr 3, 2009 at 19:19

anon

1 Comment

Sindre Sorhus Over a year ago

I don't see it? What should happen except that there will be an outline when I click on something in Firefox?

Collectives™ on Stack Overflow

Optimize jQuery code

4 Answers 4

3 Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related