CODEWITHSUNDEEP
javascriptjquery
Stefan Michelangelo Mihajlovic
Stefan Michelangelo Mihajlovic

Reputation: 164

Rotating logo back and forward

I need logo to rotate in 400degree and then rotate back on 360 degree on mouseOver, then on mouseOut it should roate -400 and then back for 40 degree. Here is what i accomplished.

$("#logo").rotate({ 
bind:
 { 
    mouseover : function() { 
        $(this).rotate({animateTo:400})
    },

    mouseout : function() { 
        $(this).rotate({animateTo:-40})
    }
 } 

});

Upvotes: 2

Views: 150

Answers (3)

Banana
Banana

Reputation: 7473

you need to add 2 extra arguments for the rotate function:

  • callback: this is a function that runs when the rotate is done, here you pull it back the -40deg.
  • duration: this is the duration of the rotate in ms.

your code would look like that:

$("#logo").rotate({
    bind: {
        mouseover: function () {
            $(this).rotate({
                animateTo: 400,
                callback: function () {
                    $(this).rotate({
                        animateTo: 360
                    });
                },
                duration: 400
            });

        },

        mouseout: function () {
            $(this).rotate({
                animateTo: -40,
                callback: function () {
                    $(this).rotate({
                        animateTo: 0
                    });
                },
                duration: 400
            });
        }
    }

});
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<img id="logo" src="http://www.keecker.com/img/logo_circle.png">

UPDATE:

for future reference, people who prefer to achieve the same with pure css, here is a possible solution:

#logo {
    -webkit-animation: rotate_backwards 1s forwards;
    animation: rotate_backwards 1s;
}
#logo:hover {
    -webkit-animation: rotate_forward 1s forwards;
    animation: rotate_forward 1s;
}
@-webkit-keyframes rotate_forward {

    60% {
        -webkit-transform:rotate(400deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
    }
}
@-webkit-keyframes rotate_backwards {

    60% {
        -webkit-transform:rotate(-400deg);
    }
    100%{
        -webkit-transform:rotate(-360deg);
    }
}
@keyframes rotate_forward {

    60% {
        transform:rotate(400deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
@keyframes rotate_backwards {

    60% {
        transform:rotate(-400deg);
    }
    100%{
        transform:rotate(-360deg);
    }
}
<img id="logo" src="http://www.keecker.com/img/logo_circle.png">

Upvotes: 1

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

If you need action only on hover ..simple to use css :hover instead of javascript

#logo{
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);
    transition-duration: 0.5s;
}
#logo:hover {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
    transition-duration: 0.5s;
}

DEMO

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206467

#logo      {margin:30px; transition:1s;}
#logo:hover{transform:rotate(-400deg);}
<img id="logo" src="//placehold.it/100x100/f0f&text=LOGO">

Upvotes: 2

Related Questions