Question

我希望在页面右侧显示一个“标签”，在点击时滑入（从右侧）。（并在第二次点击时再次滑出）。我的代码在Firefox中运行良好，但在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>

Answer 1

用左右替换并交换+ =和 - =

$('#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浏览器

Answer 2

那是因为你正在设置css left属性的动画，我认为你的意思是为right设置动画。看一下这个fiddle

我的jquery动画在FF中工作，但不在IE或Chrome中

2 个答案: