我的 jquery 动画可以在 FF 中运行，但不能在 IE 或 Chrome 中运行

发布于 2024-12-08 01:14:55 字数 1607 浏览 0 评论 0原文

我想要一个“选项卡”突出在页面右侧，单击时会滑入（从右侧）。（并在第二次单击时再次滑出）。我的代码在 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>

原文

I want a 'tab' sticking out on the right of the page, that slides in (from the right) on click. (and slides out again on 2nd click).
My code works in Firefox fine, but in IE and chrome it initially appears in the correct place, but on click - immediately swops to the left of the page.

Can someone guide/help me please to get it to work cross browser - thanks.

    <!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你又不是我 2024-12-15 01:14:55

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

回复收藏 0 原文

你对谁都笑 2024-12-15 01:14:55

将左侧替换为右侧并交换 += 和 -=

$('#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 中对我有用

replace left with right and swap += and -=

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

works for me in Chrome

回复收藏 0 原文

~没有更多了~