简单的 jquery 动画插件不起作用答案

【问题标题】：Simple jquery animation plugin won't work简单的 jquery 动画插件不起作用
【发布时间】：2014-02-20 22:56:09
【问题描述】：

我必须做一个简单的 jquery 插件来做一些事情，所以我决定尝试一些简单的事情，只需对页面中的每个段落应用“转换”，这是我的 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>

然后我做了“插件文件”和一个外部 .js 来调用插件的功能。这是“插件文件”： 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);
    });
}

最后是调用插件函数的文件： E2.js

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

当我将鼠标放在任何段落上时没有任何反应...

【问题讨论】：

标签： jquery plugins transform

【解决方案1】：

见：Animate element transform rotate

基本上，您必须通过在步进函数中应用 CSS 来制作动画。

另外，如果使用 chrome，您需要使用 -webkit-transform 属性。

$.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');
 }

工作 jsfiddle：http://jsfiddle.net/6NsNk/

【讨论】：