Блог

Мне интересно, можно ли анимировать ширину элемента LI при наведении курсора мыши, а затем вернуть его обратно к ширине по умолчанию onmouseout. Я подумал, что мог бы использовать .css() для захвата и сохранения значения ширины по умолчанию в переменной, но я не уверен, где и как объявить эту переменную, чтобы она правильно работала в следующем коде. Любая помощь будет признательна. Спасибо

  $('#price-main-menu li').hover(function() {
$(this).animate({width:"250px"},400);
},
function() {$(this).animate({width:  a},400);
});
 

Хорошо, я продвинулся немного дальше, и, похоже, ключ — это $.data(). Следующее выдает мне предупреждение с правильным значением в нем, но я не думаю, что я правильно ссылаюсь на переменную как на анимированное значение.

  $('#price-main-menu li a').each(function() {
 $.data(this, 'width', $(this).css('width'));
 });

 $('#price-main-menu li a').hover(function() {
    $(this).animate({width:"250px"},400);
    },
    function() {
    var width = $.data(this, 'width');
    alert(width);
    $(this).animate({width:  width},400);
});
 

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

Понял.

  $('#price-main-menu li a').each(function() {
   $.data(this, 'width', $(this).css('width'));
 });

 $('#price-main-menu li a').hover(
   function() {
$(this).animate({width:"250px"},400);
   },
   function() {
var width = $.data(this, 'width');
   $(this).animate({width: width},400);
   });
 

это образец, который я сделал. (обновлено с добавленным вами foreach, но я предлагаю использовать width() вместо получения ширины css)

http://jsfiddle.net/Quincy/5CALM/1/

  $('#price-main-menu li').each(function() {
      $.data(this, 'width', $(this).width());
   });
    $('#price-main-menu li').hover(function() {

      $(this).stop().animate({width:"250px"},400);
      },
      function() {$(this).stop().animate({width: $(this).data('width')   "px"},400);
    });
 

Раньше я data() сохранял исходную ширину и добавлял ‘px’ при настройке ширины.
Также я предлагаю вам добавить stop() , чтобы остановить текущую анимацию перед выполнением текущей анимации, чтобы она выглядела более плавной.