我正在使用 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();
//...
});
DEMO .
关于javascript - JQuery .animate() 仅适用于 Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16073189/