Question

我必须做一个简单的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();
    });
})

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

Answer 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/

简单的jquery动画插件将无法正常工作

1 个答案: