Делая ул списка элементов анимации при наведении


У меня есть экспериментальный скрипт, который делает анимацию ул список элементов фона-позиция, когда список элементом находится курсор. Есть еще один способ управлять этой задачей или просто оптимизировать этот код?

Я хочу сделать меню, которое содержит элементы с помощью анимированного фона и иметь представление о rotoscope стиль дизайна или что-то в этом направлении. Я думаю в кросс-браузер совместимости слишком. На данном этапе этот код прекрасно работает в Opera, интернет Explorer 6, хром, Firefox 2.0 и Firefox 4.0.

jsFiddle

$(document).ready(function(){
  $("li.animate").hover(
    function () {

      var param = '0 0';
      ids = setInterval(function() {
        if ( c >= 5 ) {
          c = 1;
          $('.animate').css('backgroundPosition', '0 0');
        }
        else {
          param = (-100 * c++ )+'px 0';
          //alert(param);
          $('.animate').css('backgroundPosition', param);
          if ( c > 4 ) $('.animate').css('backgroundPosition', '0 0');
        }
      }, 40);
    },
    function () {
      $('.animate').css('backgroundPosition', '0 0');
      clearInterval(ids);
    }
  );
});


392
3
задан 27 июня 2011 в 07:06 Источник Поделиться
Комментарии
2 ответа

Прежде всего я еще раз упомянуть, что я хотел бы использовать GIF анимацию, чтобы решить эту, а не на JS. Его очень неоптимальное решение для простой проблемы.

Ваш код в блок кода отсутствует два заявления ВАР у вас в jsFiddle пример.

Вот несколько вещей, которые я хотел изменить:

В большинстве случаев, когда вы должны ввести дважды одно и то же значение, вы делаете что-то неправильно. Использование переменных для хранения вещей. Делает код более легким в обслуживании, легко читается, быстрее в некоторых случаях и т. д... и давать переменным имена, которые говорят сами за себя. Поскольку вы не пишите никаких комментариев, его даже более важным.

Кэш объектов jQuery в переменные. Выбирая их снова и снова, ваш код становится медленным и трудно mainain. Вот пример:

$animate = $("li.animate");
$animate.hover(/* blabalbal */);

Поместите весь код в функцию и передать переменную вещи (вещи, которые можно изменить) в качестве параметров. Всегда спросите себя, что может измениться, если вы хотите повторно использовать тот же код для разных настройки в CSS / HTML-код. (Например, разные размеры элемента)

var yourFunction = function( $elem ){
$elem.each(function(){
//do something
});
};

$(function(){ //document ready
yourFunction( $("whatever element you want to handle") );
});

Затем вы можете вызвать функцию внутри документа готов и вы не должны оставить все свои вещи в готовые функции документа.

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

Внутри вашей функции Ховер вы повторно $('.анимировать'). Что вы делаете, если у вас есть более чем один элемент с этим классом? Вы можете обратиться к элементу, вы парите с этим внутри меняющуюся функцию:

   $(something).hover(function(){ $(this) //give you back a jQuery selection of the hovered element 
},function(){});

Самую большую проблему я вижу в вашем коде заключается в том, что вы объявили переменные очень глобально, что вы делаете, если необходимо применить этот код дважды на той же странице?

Надеюсь, что это помогает.

2
ответ дан 28 июня 2011 в 12:06 Источник Поделиться


  • Вы вышли из объявления переменных кодов и С в размещен код. Также не стоит понапрасну пусть будут глобальные переменные. Вы можете перемещать идентификаторы в документ готовые функции и с первого наведите функцию.

  • Вы очень непоследовательны:


    • Вы сначала объявить С быть 0, но в анимации вы сбросить его на 1 вместо. Выбрать один из них.

    • Когда с достигает 5 установить в положение фона по -500px в 0 и затем в следующей строке (если ( с > 4 ) ...) сразу назад к 0 0, что произойдет в следующем вызове функция интервала снова. Как я вижу, строка если ( с > 4 ) ... это совершенно не нужно.


2
ответ дан 28 июня 2011 в 12:06 Источник Поделиться