11497 sujets

JavaScript, DOM et API Web HTML5

Rotation en Jquery qui ne fonctionne pas

Bonjour,

J'aimerais faire tourner une Div sur un clic. Je me suis tourné vers ce site pour générer l'effet : http://www.hazelist.com

Après avoir fait mes règlages, j'obtiens ce code : 

<!DOCTYPE html>
 
    <head>
        <link rel="stylesheet" type="text/css" href="style.css" />
         
            <!-- Newer version may available -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <!-- Rotate plugin only for rotate animation -->
        <script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
 
       
    </head>
    <body>
 
            <div id="j_event">Play Animation</div>
            <div id="j_action">Animation Preview</div>
             <script>
        $('#j_event').click
        (   function()
            {   $('#j_action').rotate({animateTo:20, duration:1000});
            }
        );
        </script>
 
    </body>
 
    </html>


et le css :

#j_action
{   height:140px;
    width:140px;
    border:2px solid #000000;
    padding:10px;
    background-image:url(test.png);
    background-color:#F7CDA5;
    background-repeat:no-repeat;
    background-position:center;
    margin-left:auto;
    margin-right:auto;
}

#j_event
{   background-color:rgb(255,225,195);
    border:2px solid #000000;
    width:120px;
    padding:5px;
}


je teste en local mais cela ne fonctionne pas, alors que le test sur le site est bon. Je dois passer à côté de quelque chose mais je ne vois pas. Pourriez-vous m'aider ?
remplace par ça et la rotation devrait fonctionner :

<!-- Newer version may available -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Modifié par tazzkiller (27 Dec 2013 - 17:06)
Sujet clos
Aller à