IE7中的jQuery.animate（）和animate（）回调不起作用

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

检查animate数组的最后一个条目后没有,！ FF可以处理这个，IE不行。

示例

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

Answer 2

 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 3

jQuery无法在IE中设置边框动画：http://bugs.jquery.com/ticket/5001

我曾经发现动画背景颜色的插件，但现在找不到任何“修复”边框动画的插件。

一种方法是将元素放置在占位符内，使用1px的填充，然后使用此插件为整个占位符的背景设置动画：http://plugins.jquery.com/project/color

插件到位后，只需像往常一样调用.animate()传递新的背景颜色。