Question

在我的项目中，几乎所有内容都使用jQuery进行动画处理。我没有使用CSS3动画。在测试中，我发现hover效果scale和rotate在Safari中根本不起作用。任何想法或建议？一个例子：

HTML：

<div id="icons">
            <img src="images/icons/html_.png" width="5%" max-width: "100%" alt="HTML">

            <img src="images/icons/gulp_.png" width="5%" max-width: "100%" alt="Gulp">       

            </div> 
 </div>

jQuery的：

    $('#icons').css({'perspective': '50px',
                'perspective-origin': '50% 50%'});
var gulpLogo = $('img[alt~="Gulp"]');
gulpLogo.hover(function() {
    $({rotateVar: 0}).animate(
    {
        rotateVar: 60
    },
    {
        duration: 8000,
        easing: 'easeOutElastic',
        step: function(now, abc){
            gulpLogo.css('transform', 'rotateY('+now+ 'deg)' );
        }
    } 
)
}, function() {
    $({rotateVar: 0}).animate(
    {
        rotateVar: 0
    },
    {
        duration: 8000,
        easing: 'easeOutElastic',
        step: function(now, abc){
            gulpLogo.css('transform', 'rotateY('+now+ 'deg)' );
        }
      } 
   )
});

这是另一个：

    $('img[alt~="HTML"]').hover(function() {
    duration: 5000,
      $(this).css('transform', 'scale(1.4)');
      }, 
      function() {
      $(this).css('transform', 'scale(1)');
    });

Answer 1

尝试

$('img[alt~="HTML"]').hover(function() {
      $(this).css('transform', 'scale(1.4)');
      $(this).css('-webkit-transform', 'scale(1.4)');
      }, 
      function() {
      $(this).css('transform', 'scale(1)');
      $(this).css('-webkit-transform', 'scale(1)');
    });

jQuery缩放和旋转动画，悬停效果在Safari中不起作用

1 个答案: