JQuery Animate Image Rotation

I have a nav bar with sub menus and an arrow to click on that will bring down the submenu (already using jQuery slideToggle()) and I am trying to use jQueryRotate.js to rotate the

Solution 1:

Try it with this:

if($(this).hasClass('rot')) {
    $(this).removeClass('rot').rotate({
        duration: 200,
        angle: 180,
        animateTo:0
  });
} else {
    $(this).addClass('rot').rotate({
        duration: 200,
        angle: 0,
        animateTo:180});
};

jsFiddle

BTW: I would recommend using CSS transform instead of a jQuery library for rotating the image.

jsFiddle with corrected HTML

I would recommend you learning the basics of HTML and CSS, because without this you will never be able to create a website which will work perfectly and with good performance in all browsers and devices.

Take maybe a look at Codeschool, they have some free courses there which cover the fundamentals.

Solution 2:

You could also do it this way:

var currAngle = $(this).getRotateAngle();
if(currAngle == 180){
        $(this).rotate(0);
    }
    else{
        $(this).rotate(180);
    }

And to have more control over the rotation, use:

var currAngle = $(this).getRotateAngle();
if(currAngle == 180){
    $(this).rotate({
        duration:1300,
        angle:180,
        animateTo:0
    });
}
else{
    $(this).rotate({
        duration: 1300,
        angle:0,
        animateTo: 180
    });
}

Solution 3:

$("#row-1").click(function(){
    value1 += delta1;
    delta1 = -delta1;
    $("#image1").rotate({ animateTo:value1});
});

add row-1 as an id to the column that the image is in, and then add image as an id to your image.