Простой плагин анимации jquery не будет работать

Question

Простой плагин анимации jquery не будет работать

0

Я должен сделать простой плагин 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();
    });
})

Ничего не происходит, когда я наводил курсор на любой абзац...

Doruko 21 фев. 2014, в 00:31

Источник

Теги:

jquery

plugins

transform

1 ответ

Ещё вопросы

ioseph · Accepted Answer · 2014-02-20T20-48-00.000Z

См.: Вращение элемента анимации вращается

В основном вам придется делать анимацию, применяя CSS в функции шага.

Также, если вы используете хром, вам нужно использовать свойство -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/