JQuery .animate()仅适用于Chrome浏览器

JQuery .animate() only works in Chrome

本文关键字：适用于 Chrome 浏览器 animate JQuery      更新时间：2023-09-26

我使用JQuery .animate()函数在容器div中滑动div。这在Google Chrome中没有问题，但当我在Firefox或IE中尝试时，div变成乱码混乱，实际上不会滑动。我是一个新的Javascript和无知的浏览器兼容性的方式，谁能指出我在正确的方向?以下是相关代码:

HTML 

<div id="slider">
  <div id="main" class="content">
  </div>
  <div id="projects" class="content">
  </div>
  <div id="about" class="content">
  </div>
  <div id="contact" class="content">
  </div>
</div>
CSS 

#slider {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
#main {
  background-color: red;
  width: inherit;
  height: inherit;
  position: absolute;
}
#projects {
  background-color: blue;
  width: inherit;
  height: inherit;
  position: absolute;
}
#about {
  background-color: yellow;
  width: inherit;
  height: inherit;
  position: absolute;
}
#contact {
  background-color: green;
  width: inherit;
  height: inherit;
  position: absolute;
}
.content {
  left: 0;
  top: 0;
}
JavaScript 

$(document).ready(function() {
var contentWidth = '100px';
for( var i=0; i < 2; i++) {
  $('.gallery' + (i + 1)).colorbox({ opacity:0.5 , rel:'gallery' + (i+1)});
}
$('.content').css({
  position: 'absolute',
  left: contentWidth
});
$('#main').addClass('visible');
document.getElementById('main').style.left = "0";
$("li a").click(function () {
  event.preventDefault();
  var $blockID = $( $(this).attr('href') );
  if ($blockID.hasClass('visible')) { return; }
  $('.content.visible')
    .removeClass('visible')
    .animate({ left: '-=100px' }, {  
      duration: 'slow',
      complete: function () {
        $(this).css('left', '100px');
      }
    }
 );
$blockID
  .addClass('visible')
  .animate({ left: 0 }, {duration: 'slow'});
});
});

JSFiddle: http://jsfiddle.net/bwvVZ/

我也可以提供一个链接到有问题的网站，虽然我会推迟，因为我不确定它是否违反规定。任何帮助都非常感激!

您缺少单击处理程序中的event参数

$("li a").click(function(){ 
    event.preventDefault();
    //...
});

应该是

$("li a").click(function (event){
    event.preventDefault();
    //...
});

。

不能在IE自己测试，但这修复了Firefox和returnValue应该修复IE。CSSDeck测试-我无法从当前位置访问jsfiddle。

$("li a").click(function (event){
    event.returnValue = false; //ie
    if(event.preventDefault) //prevents error if not found
        event.preventDefault();
    var $blockID = $($(this).attr('href'));
    ...
相关文章：