drupal7里Jquery动画在IE下出现抖动

显示全部楼层 · 发表于 10-13-2011 02:16

在网上查了一下，Jquery动画在IE下出现抖动，是因为浏览器解析该页面并没有采用标准模式，而Jquery动画必须是在标准模式之下，也就是strict mode。
如果不在HTML前制定DOCTYPE，那么IE会使用怪癖模式，也就是Quirks Mode解析该页面。从科学地角度讲，我们还是应该制定为strict mode的。但是难保你当初为了省事而忘记写了，结果项目越做越大了。
而你又恰恰使用了Jquery，你可以选在再把制定为strict mode的这行代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/codefilter_code]
加上去，Jquery动画正常了，可许多页面布局又乱掉了。很显然得不偿失啊。
下面就是改写Jquery动画中的slideUp和slideDown，（我发现自己有写的让别人看不懂的能力，谁叫怪事太多了呢）。
(function($){
  var timer;
  $.fn.customSlide = function(options){
var defaults = {
  'flag' : 'down', //the flag using differing "SlideDown" and "SlideUp"
  'delay' : 10,       // the delay of the slide function
  'distance' : 10 //the distance of the element's each step
};
var options = $.extend(defaults, options);
this.each(function(){
  $(this).css('overflow', 'hidden');
  clearInterval(timer);
  var initHeight = $(this).height();
  if(typeof $(this).data('initHeight') == 'undefined'){$(this).data('initHeight', initHeight);}
  if(typeof $(this).data('initAction') == 'undefined'){$(this).data('initAction', true);}
  if(options.flag == 'up'){
timer = setInterval($(this).slide(parseInt('-' + options.distance)), options.delay);
  }else{
timer = setInterval($(this).slide(options.distance), options.delay);
  }
});
  };
  $.fn.slide = function(distance){
var element = this;
return function(){
   var height = element.height() + distance;
  if(typeof element.data('initAction') != 'undefined' && element.data('initAction')){
height = 1;
element.height(height);
element.show();
element.data('initAction', false);
  }
  if(height < 0){
element.height(0);
element.hide();
if(typeof element.data('initAction') != 'undefined' && !element.data('initAction')){
  element.data('initAction', true);
}
clearInterval(timer);
  }else if(height > element.data('initHeight')){
element.height(element.data('initHeight'));
clearInterval(timer);
  }else{
      element.height(height);
  }
};
  }
})(jQuery)

感谢溯游分享！！！

帐号		自动登录	找回密码
密码			注册

[Drupal问题] drupal7里Jquery动画在IE下出现抖动

相关帖子