Kenburn缩放图像效果不起作用

Question

点击时，我需要使用Kenburns效果缩放图像。但是，这不起作用。

代码：

$(document).ready(function () {

$('.kenburns').on('click', function () {

    $('.kenburns').addclass('img.zoom');
    });
});

JSFiddle

Answer 1

您的jQuery代码存在一些问题：

首先，addclass应为addClass。 Javascript区分大小写。

其次，元素addClass附加到父div，而不是图像本身。基本上你试图将CSS变换应用于div而不是图像，而你实际上想要将它应用于图像。要将类添加到图像而不是父div，请将其用作选择器：

$('.kenburns img')

而不是......

$('.kenburns')

或者，也许更具性能，您可以使用

$('.kenburns').children('img')

最后，您尝试添加到图像的类名称不正确。 addClass接受CSS类名称（“缩放”），而不接受CSS选择器（“img.zoom”）。

更正后的代码：

$(document).ready(function () {
    $('.kenburns').on('click', function () {
        $('.kenburns img').addClass('zoom');
    });
});

工作JSFiddle