How to rotate an image on click and then rotate it back after another click? Using HTML, CSS and jQuery

Question

I am trying to make a site that has a image (a play button). When it is pressed an iframe appears and the image should slowly turn 90degrees. When the image is clicked again the iframe should disappear and the image should rotate back 90degrees to the original, but so far I cannot get it to work.

I am guessing something is wrong with my jQuery but haven't been able to find the problem.

Here's an example:

HTML:

    <div id="TrailerBox">
        <img id="PlayButton"/>
        <iframe id="video" class="hidden" src="https://www.youtube.com/embed/kAauqkWuZg4">

        </iframe>
    </div>

CSS:

#TrailerBox {
    width:20em;
    height:10em;
    background-color:blue;
}

#PlayButton {
        width: 5em;
        height: 10em;
        cursor: pointer;
        background-color:red;
}

#video {
        width: 900px;
        height: 542px;
}

.hidden {
    display:none;
}

jQuery:

$( document ).ready(function() {
    var NumberOfClicks = 0;
        $('#TrailerBox img.PlayButton').click(function(e) {
            e.preventDefault();
            $('#video').toggleClass('hidden');

            NumberOfClicks++;
            if (NumberOfClicks = 1) {
                        $(this).css({
                            '-webkit-transform': 'rotate(' + 90 + 'deg)',
                            '-moz-transform': 'rotate(' + 90 + 'deg)',
                            '-ms-transform': 'rotate(' + 90 + 'deg)',
                            'transform': 'rotate(' + 90 + 'deg)'
                        });
                        $(this).rotate(rotation);
                };
            }
            if (NumberOfClicks = 2) {
                        $(this).css({
                            '-webkit-transform': 'rotate(' + -90 + 'deg)',
                            '-moz-transform': 'rotate(' + -90 + 'deg)',
                            '-ms-transform': 'rotate(' + -90 + 'deg)',
                            'transform': 'rotate(' + -90 + 'deg)'
                        });
                        $(this).rotate(rotation);
                };
                NumberOfClicks = 0;                    
            }
   });

Answer 1

So a good solution here that would make your life a little less stressful would be to set up a css class that has those settings and use easing for the transition. This creates the animated effect I think your looking for and is alot simpler to keep track of, so the css for the selectors below would be:

    #PlayButton {
        width: 5em;
        height: 10em;
        cursor: pointer;
        background-color:red;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.4s ease-in;
        -moz-transition: all 0.4s ease-in;
        -o-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
    }

.rotateOn{-webkit-transform: rotate(90deg)!important;
                     -moz-transform: rotate(90deg)!important;
                     -ms-transform: rotate(90deg)!important;
                     transform: rotate(90deg)!important;
                    -webkit-transition: all 0.4s ease-in;
                    -moz-transition: all 0.4s ease-in;
                    -o-transition: all 0.4s ease-in;
                    transition: all 0.4s ease-in;
       }

and jquery can just be:

`$(document).ready(function(){
    $rotated = false;
    $('#TrailerBox img#PlayButton').click(function(){
       $(this).toggleClass('rotateOn');
    });
});`

Answer 2

Use this code, if this is what do you want:

$(document).ready(function(){
    $rotated = false;
    $('#TrailerBox img#PlayButton').click(function(){
        if($rotated == false){
            $(this).css({
                '-webkit-transform': 'rotate(' + 90 + 'deg)',
                '-moz-transform': 'rotate(' + 90 + 'deg)',
                '-ms-transform': 'rotate(' + 90 + 'deg)',
                'transform': 'rotate(' + 90 + 'deg)'
             });
             $rotated = true;
        }else{
            $(this).css({
                '-webkit-transform': 'rotate(' + 0 + 'deg)',
                '-moz-transform': 'rotate(' + 0 + 'deg)',
                '-ms-transform': 'rotate(' + 0 + 'deg)',
                'transform': 'rotate(' + 0 + 'deg)'
             });
             $rotated = false;
        }
    });
});

http://jsfiddle.net/d4mk9eu3/2