Jquery toggleClass reduce image size on click

Question

I have webpage where I can navigate with arrows horizontally. I would like to add an effect when you click on the arrows his size reduce of 10% and refind his normal size on the next slide. With hover it works but not with onclick. I prefer to use on click because I fear that hover which doesn't work on a tablet. Could you tell me what I'm doing wrong in script ?

<a href="#1" title="next" class="flscroll" id="flscrolld"></a>

here my css :

#flscrolld {
        background: url(images/sprite2.png) no-repeat left -200px;
        padding-right: 50px;
        right: -30px;
        width: 53px;

        -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    }
    .transition {
    -webkit-transform: scale(0.6); 
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6);
}

My Jquery script :

$(document).ready(function() {
    $("#flscrolld" ).click(function() {
        $("#flscrolld").toggleClass('transition');
    }, function() {
        $("#flscrolld").removeClass('transition');


    });

});

Answer 1

click only has one callback, and toggleClass does exactly what it sounds like, it toggles the class, so you only need one callback

$(document).ready(function() {
    $("#flscrolld" ).click(function() {
        $(this).toggleClass('transition');
    });
});

FIDDLE