[英]JQuery .animate() only works in Chrome
我正在使用JQuery .animate()函数在容器div中滑动div。 这在Google Chrome浏览器中没有问题,但是当我在Firefox或IE中尝试时,div变成乱码,实际上不会滑动。 我是Java的新手,对浏览器兼容性的知识一无所知,有人能指出正确的方向吗? 以下是相关代码:
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'));
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.