Simple jquery animation plugin won't work

Question

I have to do a simple jquery plugin that do something, so i decided to try something easy, just applying a "transform" to each paragraph in my page, this is my HTML: E2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="es" lang="es">

<head>
    <title>Página de pruebas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--<link rel="StyleSheet" href="css/style.css" type="text/css" />-->
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jquery.plugins.js"></script>
    <script type="text/javascript" src="E2.js"></script>
</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, animi, praesentium impedit obcaecati ipsa exercitationem corrupti officiis quam aut vero aliquam fuga tenetur a harum soluta illo alias dolorem eius?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, non fugiat natus magni perspiciatis tempore nemo fuga quibusdam ea eveniet. Earum, esse deserunt laboriosam fugiat explicabo eveniet velit quisquam quos!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, quis, ab, eius esse aliquam expedita itaque consequuntur tempora eligendi dolores architecto earum veniam similique ducimus numquam exercitationem facilis laboriosam voluptates.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, quo, quae corporis optio perspiciatis magni quas mollitia praesentium rerum reprehenderit facilis enim corrupti error repellat ut ducimus voluptatum explicabo officia.</p>

</body>
</html>

Then i did the "plugins file" and an external .js to call the plugin's functions. This is the "plugins file": jquery.plugins.js

jQuery.fn.desaparecer=function(){
    this.each(function(){
        $(this).css("display", "none");
    });
}
//this code above doesn't matter

jQuery.fn.animar=function(){
    this.each(function(){
        $(this).animate({
            transform: "rotate(180deg)"
        },200);
    });
}

And finally the file calling the plugin function: E2.js

$(document).ready(function(){
    $("p").on('mouseenter', function(e){
        $("p").animar();
    });
})

Nothing happens when I put the mouse over any paragraph...

score 0 · Accepted Answer · edited May 23 '17 at 12:03

See: Animate element transform rotate

Basically you'll have to do the animation by applying CSS in a step function.

Also if using chrome, you'll need to use the -webkit-transform property.

$.fn.animar=function(){
    this.animate({  borderSpacing: -90 }, {
      step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)');
        $(this).css('-moz-transform','rotate('+now+'deg)'); 
        $(this).css('-ms-transform','rotate('+now+'deg)');
        $(this).css('-o-transform','rotate('+now+'deg)');
        $(this).css('transform','rotate('+now+'deg)');  
      },
       duration:'slow'
       },'linear');
 }

Working jsfiddle: http://jsfiddle.net/6NsNk/

Simple jquery animation plugin won't work

1 Answers1