Jquery toggleClass 在点击时减小图像大小

Question

我有一个网页，我可以用箭头水平导航。当您单击箭头缩小 10% 并在下一张幻灯片上重新找到他的正常尺寸时，我想添加一个效果。使用悬停它可以工作，但不能使用 onclick。我更喜欢在点击时使用，因为我担心悬停在平板电脑上不起作用。你能告诉我我在脚本中做错了什么吗？

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

这里是我的 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);
}

我的 Jquery 脚本：

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


    });

});

Answer 1

click 只有一个回调，toggleClass 就像它听起来的那样，它切换类，所以你只需要一个回调

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

FIDDLE