Rotation de l'image sur la bascule avec jQuery

Site en question: http://mtthwbsh.com

Je suis d'essayer de créer un rétractables nav où lorsqu'elle est activée, la flèche pointe vers le haut (et le bas lorsqu'elle est cachée).

J'ai été lire sur la rotation d'images avec jQuery, et ont trouvé que c'était ma meilleure ressource: Rotation de l'Image(s) OnClick Avec jQuery?

Je comprends ce qui se passe ici, mais je suis avoir un moment difficile de les visualiser avec mon balisage. Mon jQuery pour mon effondrement de la valeur liquidative est comme suit:

<script type="text/javascript">
$(document).ready(function(){
/* toggle nav */
$("#menu-icon").on("click", function(){
    $(".nav").slideToggle();
    $(this).toggleClass("active");
  });
 });
</script>

Je me demandais si quelqu'un pourrait aider à expliquer comment je pourrais traduire ce genre de fonctionnalité à mon plugin?

inspecter ce pour plus de rotation de l'animation avec jQuery: stackoverflow.com/questions/12062818/...
vous devriez vérifier ce logo animation trop (: bilol.com.tr

OriginalL'auteur mtthwbsh | 2012-12-22

  1. 6

    C'est vraiment juste ajouté un peu de CSS à un élément. Vous pouvez créer une classe dans votre feuille de style:

    .rotate {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

    Puis il suffit d'utiliser la bascule de classe à ajouter/supprimer.

    Ce ne sera pas fournir toute l'animation. Transitions CSS3 pouvez même le faire pour vous sans nécessiter de javascript pour animer. Jetez un oeil à cette, qui a un JSFiddle démo si vous voulez l'essayer.

    Modifier

    Voici une démonstration sur la façon d'effectuer une transition CSS dans les deux directions:

    http://jsfiddle.net/jwhitted/NKTcL/

    Je comprends comment appliquer le CSS3 transformer, j'ai utilisé celui de mon logo, je suis juste avoir de la difficulté à ajouter lorsque vous cliquez dessus est mon problème. Je vais continuer à travailler avec ces notes.
    Cette mise à l'intérieur de votre cliquez sur la fonction de travail: $("#menu-icon").toggleClass("rotate"); Si ca ne fonctionne pas, vous avez un jsfiddle ou un autre site je peux prendre un coup d'oeil?
    Juste l'URL que j'ai posté ci-dessus. Je ne vais pas être en mesure de revenir à elle pour un peu, car je suis en voyage, mais prenez vos notes dans l'esprit, merci pour votre aide!
    Vous avez le code que j'ai donné à .toggleClass("rotate");, mais je ne vois pas le rotate classe dans votre feuille de style. Essayez d'ajouter la section CSS que j'ai posté dans ma réponse à votre feuille de style et voir si cela résout-il.
    Votre JSFiddle exemple ne fonctionne pas.

    OriginalL'auteur Jason Whitted

  2. 19

    Le vérifier, peut-être peut aider quelqu'un http://jsfiddle.net/gkmagvo3/515/

    <a class="arrow" href="#">        
    <img class="arrow-img rotate-reset" src="img.png" />        
</a>

    Un peu de css:

    .rotate {
    transform: rotate(-180deg);
    /*transform: rotate(180deg);*/
    transition: .3s;
}
.rotate-reset {
    transform: rotate(0deg);
    transition: .3s;
}

    Et javascript:

    $('.arrow').on("click", function (event) {
    $('.arrow-img').toggleClass('rotate');
    $('.arrow-img').toggleClass('rotate-reset');
});
    Je suggère d'utiliser un cubic-bezier de transition pour le rendre plus fantaisistes transition: .3s cubic-bezier(.17,.67,.21,1.69); jsfiddle.net/6tt38q2q/2
    semble assez cool. merci.

    OriginalL'auteur Andreybeta