我的jQuery动画效果在FF但不是IE或Chrome

我想在页面右侧突出一个“标签”，该标签在点击时从右侧滑入。（并在第二次点击时滑出）。我的代码在Firefox中工作正常，但在IE和Chrome中它最初出现在正确的位置，但点击时 - 立即转到页面的左侧。我的jQuery动画效果在FF但不是IE或Chrome

有人可以指导/帮助我，让它工作跨浏览器 - 谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
</head> 

<body> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <div id="slider" style="position:fixed;width:340px;right:-300px;bottom:80px;z-index:999"> 
    <div id="slideButton" style="position:relative;float:left;height:120px;width:40px;background:fuchsia;text-align:center;">S<br/>l<br/>i<br/>d<br/>e<br/>r<br/></div> 
    <div id="slideContent" style="position:relative;float:left;height:120px;width:300px;background:yellow;"> 
    Slider text goes here <br/>(should slide in/out <br/>from right of page) </div> 
    </div> 

<script type="text/javascript"> 
$('#slideButton').toggle(function() { 
    $('#slider').animate({ 
     left: '-=200' 
     }, 1500, 'swing', function() { 
     // Animation complete. CALLBACK? 
    }); 
}, function() { 
    $('#slider').animate({ 
     left: '+=200' 
     }, 1000, 'swing', function() { 
     // Animation complete. CALLBACK? 
    }); 
}); 
</script> 

</body> 

</html>

来源

2011-10-03 user801347

那是因为你在动画的CSS left财产，我认为你的意思是改为使用right进行动画制作。看看这fiddle

来源

2011-10-03 20:49:35

左更换右和交换+ =和 - =

$('#slideButton').toggle(function() { 
    $('#slider').animate({ 
     right: '+=200' 
     }, 1500, 'swing', function() { 
     // Animation complete. CALLBACK? 
    }); 
}, function() { 
    $('#slider').animate({ 
     right: '-=200' 
     }, 1000, 'swing', function() { 
     // Animation complete. CALLBACK? 
    });

对我的作品在Chrome

来源

2011-10-03 20:48:21 topek

那么大BIG谢谢@Interstellar_Coder 。随着你的改变，我可以在所有的浏览器中工作，但为什么它在FF之前工作......谁在乎......现在可以工作;-) - 谢谢。 – user801347

我的jQuery动画效果在FF但不是IE或Chrome

回答

相关问题