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，用作您的選擇：更多performantly

$('.kenburns img') 

的，而不是...

$('.kenburns') 

或者，也許，你可以使用

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

最後，您嘗試添加到圖像中的類名稱不正確。 addClass接受CSS類名稱（「縮放」），而不是CSS選擇器（「img.zoom」）。

更正代碼：

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

工作JSFiddle