All geek questions in one place

Problem with jQuery animations in Chrome

I animated a jQuery element using jQuery 1.3.2 and the jQuery color plugin. I simultaneously animated the "color" and "backgroundColor" properties. In IE8 and FF, it worked perfectly. Chrome animated the color of the mouse and then stopped. The background remained the same, and the mouse did not cancel the effect as it should.

The Chrome developer tools said something about being undefined. I know that I'm a little vague here, maybe this is a known issue?

EDIT - Code (finally!):

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

@ Bernhard Hofmann: What does “problems with your chosen properties” mean? Please specify.

+3
source share
4 answers

, Chrome . Chrome. script , .

<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="http://stackoverflow.com/questions/2010576/jquery-animation-issue-in-chrome" id="a1">StackOverflow</a>
        </div>
    </body>
</html>
+5

, webkit 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])];

EDIT: http://jsbin.com/ekoli

+3

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>
+1

, 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});
    });

});

:

ERROR: (from chrome dev tool): Uncaught TypeError: cannot set property 'width' of undefined

0
source

Source: https://habr.com/ru/post/1727441/

More articles:


All Articles