Моя анимация jquery работает в FF, но не в IE или Chrome - PullRequest
Новая
       1

Моя анимация jquery работает в FF, но не в IE или Chrome

1 голос
/ 04 октября 2011

Я хочу, чтобы «вкладка» торчала справа от страницы, которая скользит (справа) по щелчку.(и снова выдвигается при втором щелчке).Мой код работает в 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>

Ответы [ 2 ]

1 голос
/ 04 октября 2011

Это потому, что вы анимируете свойство css left, я думаю, вы хотели вместо этого анимировать right.Взгляните на эту скрипку

1 голос
/ 04 октября 2011

замените левую на правую и поменяйте местами + = и - = 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...