Transform in jQuery

后端 未结 9 1138
野趣味
野趣味 2020-12-06 03:24

I\'m trying to get an element to animate a rotation hover effect using jquery, I have this jsFiddle going to test. So Far I have this:

$(\".icon\").hover(fun         


        
相关标签:
9条回答
  • 2020-12-06 03:55

    If you want to animate something in css, you just have to set "transitionDuration" css property(no need for jQuery.animate), for example:

    var style = element.style;
    
    style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = '500ms';
    style.MozTransform = style.webkitTransform = 'translate3d(100px,0,0)';
    style.msTransform = style.OTransform = 'translateX(100px)';
    

    However this will work only in modern browsers, so you have to use jQuery.animate as fallback.

    Here is jQuery plugin which handling this:

    https://github.com/benbarnett/jQuery-Animate-Enhanced

    It just overrides jQuery.animate function to use css animation if available, so you don't have to worry about cross browser issues, just call jQuery.animate and the best available method will be called.

    0 讨论(0)
  • 2020-12-06 03:58

    If you're using jquery, jquery.transit is very simple and powerful lib that allows you to make your transformation while handling cross-browser compability for you. It can be as simple as this : $("#element").transition({x:'90px'}). Take it from this link : http://ricostacruz.com/jquery.transit/

    0 讨论(0)
  • 2020-12-06 03:59

    jquery.transform.js is a jquery 2d transform plugin developed by Louis remi. it allows to use transform like css in jquery. visit this link for some illustrations on how to use it. A simple illustration to rotate an element using this plugin is as follows:

    $(elem).animate({transform: 'rotate(135deg)'});
    
    0 讨论(0)
  • 2020-12-06 04:06

    I used this for scale:

    var zoom_level = .4,
        multiplier = .2;
    $('button.zoom-in, button.zoom-out').click(function(){
        zoom_level += $(this).hasClass('zoom-in') ? multiplier : -(multiplier);
    
        $('.floor').css({
            '-webkit-transform': 'scale(' + zoom_level + ')'
        });
    });
    
    0 讨论(0)
  • 2020-12-06 04:10

    Use the excellent jQuery Rotate plugin. http://code.google.com/p/jqueryrotate/. It is supported by all major browsers

    * Internet Explorer 6.0 >
    * Firefox 2.0 >
    * Safari 3 >
    * Opera 9 >
    * Google Chrome 
    

    To rotate an image, All you need to do is $('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

    To animate rotation, you can use setTmeout ex:

    setTimeout(function() { $('#myImage').rotate(30) },5)
    
    0 讨论(0)
  • 2020-12-06 04:13

    jQuery animate doesn't support rotation (see http://bugs.jquery.com/ticket/4171 and the jQuery documentation)

    Also, only CSS with numerical values are supported for animate, meaning animating colors won't work either. Oops, was not aware jQuery UI added support for colors.

    0 讨论(0)
提交回复
热议问题