Блог

Главная - Вопросы по программированию - Моя анимация jquery работает в FF, но не в IE или Chrome

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

#jquery #animation #cross-browser

#jquery #Анимация #кросс-браузерный

Вопрос:

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

Ответ №1:

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

Ответ №2:

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

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

Комментарии:

1. Большое спасибо @Interstellar_Coder . С вашим изменением она работает во всех браузерах, но почему она работала в FF раньше… кого это волнует .. теперь это работает 😉 — спасибо.