CODEWITHSUNDEEP
javascriptjquery
Jammer
Jammer

Reputation: 2420

jQuery Rotate with slideToggle

I have a div that when you click on it opens up the the content within, at the top of the bar I have an arrow image that if the content is closed (default position) the arrow is pointing to the right and when the content is open I want the arrow image to rotate to pointing down.

I am using jQueryRotate to rotate the image and I have all the elements working, but what I can't get it to work when toggling, I can only get the image to rotate once when opening the content, I have where I have got to here

$("#ProductHeaderWrap1").click(function () {
    $("#ProductDetailsToggle1").stop().slideToggle("slow");
});


$("#ProductHeaderWrap1").click(function () {
    $("#ProductHeaderWrap1").find(".arrow").rotate({
        animateTo: 90
    }, {
        duration: 500
    });
});

http://jsfiddle.net/cgF4a/ along with some worked on jQuery attempts, I just need the image to rotate to 0 when clicked to close the div.

Thanks for any help, J.

Upvotes: 1

Views: 550

Answers (1)

APAD1
APAD1

Reputation: 13666

It's easier to do this with CSS, take a look:

img.open {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    transform:rotate(90deg);
    -webkit-transition: -webkit-transform 1s linear; 
     -moz-transition: -moz-transform 1s linear;
       -o-transition: -o-transform 1s linear;
          transition: transform 1s linear;
}
img {
    -webkit-transition: -webkit-transform 1s linear;
     -moz-transition: -moz-transform 1s linear;
       -o-transition: -o-transform 1s linear;
          transition: transform 1s linear;
}

$(document).ready(function () {
    $("#ProductHeaderWrap1").click(function () {
        $("#ProductDetailsToggle1").stop().slideToggle("slow");
        $(this).find("#Image1").toggleClass("open");
    });
});

Updated JSFiddle

Upvotes: 2

Related Questions