Обратный вызов jQuery.animate () и animate () в IE7 не работает

Question

У меня есть этот код:

var items = jQuery('#main .imgteaser .txtwrap');

 items.css("opacity","0.8");

 items.mouseenter(function(){
  alert('enter');
  jQuery(this).animate({ 
   bottom: "0",
   opacity: 1,
   border: "1px solid #a6a6a6"
  }, 500, function(){alert('enter animation ready');});
  jQuery(this).addClass('hover');
 });

 items.mouseleave(function(){
  alert('leave');
  jQuery(this).animate({
   bottom: "-60",
   opacity: 0.8,
   border: "1px solid #fff"
  }, 500, function(){alert('leave animation ready');});
  jQuery(this).removeClass('hover');
 });

В Firefox это работает хорошо, но в IE7 анимация выхода из jQuery не работает и функция обратного вызова тоже не работает.

Answer 1

 items.mouseenter(function(){
  alert('enter');
  jQuery(this).animate({ 
   bottom: "0",
   opacity: 1,
   border: "1px solid #a6a6a6"
  }, 500, function(){alert('enter animation ready');); //<-- you are missing the closing bracket here
  jQuery(this).addClass('hover');
 });

Исправлено:

 items.mouseenter(function(){
  alert('enter');
  jQuery(this).animate({ 
   bottom: "0",
   opacity: 1,
   border: "1px solid #a6a6a6"
  }, 500, function(){alert('enter animation ready');});
  jQuery(this).addClass('hover');
 });

Answer 2

jQuery просто не может анимировать границу в IE: http://bugs.jquery.com/ticket/5001

Однажды я нашел плагин, который анимирует цвет фона, но не смог найти ни один плагин, который "исправляет" анимацию для границ.

Один из способов - поместить элемент внутри заполнителя с отступом 1px, а затем анимировать фон этого заполнителя, используя этот плагин: http://plugins.jquery.com/project/color

С установленным плагином просто вызовите .animate() как обычно, передавая новый цвет фона.

Answer 3

Убедитесь, что нет , после последней записи массива animate!FF может справиться с этим, IE нет.

Пример

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    alert('finished!!!');
  } //                      <-- NO COMMA HERE!!!
  );
});