4

我正在使用 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/

我也可以提供相关网站的链接，但我会推迟，因为我不确定它是否违反规则。任何帮助深表感谢！

4

2 回答 2

5

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

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

它应该是

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

演示。

于 2013-04-18T01:56:38.037 回答
1

自己无法在 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'));

    ...
于 2013-04-18T02:03:32.750 回答