Проблема с анимацией jQuery в Chrome - PullRequest
Новая
       30

Проблема с анимацией jQuery в Chrome

3 голосов
/ 06 января 2010

Я анимировал элемент в jQuery, используя jQuery 1.3.2 и плагин цвета jQuery. Я анимировал свойства 'color' и 'backgroundColor' одновременно. В IE8 и FF все работало просто отлично. Chrome анимировал цвет мыши, а затем остановился. Фон остался прежним, и указатель мыши не отменил эффект, как должен был.

Инструменты разработчика Chrome говорили о чем-то неопределенном. Я знаю, что здесь я немного расплывчат, возможно, это известная проблема?

РЕДАКТИРОВАТЬ - Код (, наконец!): 

<script>
  $(document).ready(function(event){
    $(".nav a").hover(function(event){
      $(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
    },function(event){
      $(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
    });
  });
</script>

EDIT:

@ Бернхард Хофманн - Что вы имеете в виду "проблемы с выбранными вами свойствами"? Пожалуйста, уточните.

Ответы [ 4 ]

5 голосов
/ 12 января 2010

Казалось бы, у Chrome есть несколько проблем с выбранными вами свойствами. Мне удалось заставить анимацию работать с помощью мыши, вход и выход из событий в Chrome. Вот сценарий и разметка для тех, кто хочет поиграть и попробовать. 

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(event){
                $(".nav a").
                mouseenter(function(){$(this).animate({fontSize:"2em"}, 900);}).
                mouseleave(function(){$(this).animate({fontSize:"1em"}, 900);});
            /*
                $(".nav a").hover(function(){
                    $(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
                },function(){
                    $(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
                });
            */
            });
        </script>
    </head>
    <body>
        <div class="nav" style="color:#000;background:#cfc;padding:2em 2em 2em 2em;margin:2em 2em 2em 2em;">
            <a href="/1500961/problema-s-animatsiei-jquery-v-chrome" id="a1">StackOverflow</a>
        </div>
    </body>
</html>
3 голосов
/ 14 января 2010

Похоже, что это ошибка в плагине цветовой анимации с веб-браузерами в их формате rgba(r,g,b,opacity) для стиля цвета фона.

Исправить несложно, просто добавьте эти строки в соответствующем месте внутри функции getRGB(color) плагина. 

// Look for rgba(num,num,num,num)
if (result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
    return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];

РЕДАКТИРОВАТЬ: Вот рабочая версия с исправлением http://jsbin.com/ekoli

1 голос
/ 12 января 2010

Можете ли вы предоставить HTML? Я опробовал Google Chrome 4 BETA на Mac OS и Chrome 3 на XP, и все заработало.

HTML-код, который я использовал, выглядит следующим образом 

<head>
   <!-- These are my local jquery files. Use yours or the ones from Google -->
   <script src="/osr/javascript/dev/librarys/jquery.js" type="text/javascript"></script>
   <script src="/osr/javascript/dev/librarys/jquery-ui/js/jquery-ui.js" type="text/javascript"></script>
   <script>
      $(document).ready(function(event){
         $(".nav a").hover(function(event){
            $(this).animate({"color":"#FFFFFF", "backgroundColor":"#3AB7FF"}, 900);
         },function(event){
            $(this).animate({"color":"#98DCFF","backgroundColor":"#FFFFFF"}, 900);
         });
      });
   </script>
</head>

<body>
   <div class="nav">
      <a>aighosvaovhaovuho</a>
   </div>
</body>
0 голосов
/ 07 января 2010

У меня та же проблема, с использованием jQuery.animate Прекрасно работает в FF, IE 7 & 8

код .. 

$(document).ready(function(){  
    jQuery.noConflict();
    jQuery('.boxgrid.caption').hover(function(){
    var s = jQuery(".cover", this).stop(); 
        s.animate({width: "50%"},{queue:false,duration:300});                               
        jQuery(".cover", this).stop().animate({top: "180px"},{queue:false,duration:300});
    }, function() {  
        jQuery(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
    });

});

Производит:

ОШИБКА: (из Chrome Dev Tool): Uncaught TypeError: Невозможно установить свойство 'ширина' из неопределенного

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

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

...