Оптимизировать код jQuery

Question

Я написал этот код jQuery, который исчезает в оверлее с некоторыми ссылками на изображение. То, что я обнаружил, - то, что это болезненно медленно, когда я добавляю как 10 из этих изображений. Буду очень признателен за некоторые советы и подсказки, как сделать этот код быстрее.

Если у вас есть несколько советов по моему HTML и CSS, это тоже было бы неплохо;)

JQuery код

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

Весь код

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

Answer 1

Я получил ответ немного лучше, просто изменив следующее при наведении курсора (..):

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

Самым большим отличием является только применение эффекта зависания к цели события, нет необходимости повторно применять все свои элементы на странице.

Answer 2

попробуйте удалить : focus { -moz-план-стиль: нет; } и посмотрим, что произойдет

Answer 3

Предварительный выбор БОЛЬШЕ

Хорошая работа по предварительному выбору div. Попробуйте так, чтобы он также предварительно выбирал элементы затухания в элементах вместо того, чтобы делать это при наведении:

 $().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

Я поместил ваш код на тестовую страницу и, честно говоря, даже с тридцатью или около того .thumb divs это казалось нормальным - конечно, достаточно отзывчивым, чтобы использовать его с моей стороны. Если навести указатель мыши на кучу из них, мне придется подождать, пока эффект ролловера не пройдет через все, что займет некоторое время, пока не дойдет до того, на котором я фактически остановился, но, конечно, это было то, что вы хотели, учитывая, что вы ' вместо «щелчка» используется «зависание» (что, безусловно, устранит любые проблемы со скоростью).

Я не использую реальные изображения на моей тестовой странице, просто получаю альтернативный текст, поэтому мое лучшее предположение на данный момент - убедиться, что все загружаемые изображения имеют настолько малый размер файла, насколько это возможно.