gtilflm gtilflm - 10 months ago 57
Javascript Question

Incrementing CSS value by a percent with jQuery

I'm trying to increment a % value of a CSS element with jQuery as is outlined in the answer with 104 upvotes here (Increment css top property using jquery).

I've created this fiddle ( to play with. It's supposed to increment the brightness of the image down 10% each time you click the button, but it's not working. The primary line of code is

$("#image-" + image_id + "").css("-webkit-filter", "brightness(-=10%)");

Any ideas?

Answer Source

I've updated your fiddle to make it work:

The initial brightness is declared in the code, and whenever you click the button the function gets the image ID from the data-image-id attribute on the button. It will then subtract 10% from the initial brightness and apply the new brightness.

var brightness = 50;

function darkenImage(imageId, brightness) {
    $("#image-" + imageId + "").css("-webkit-filter", "brightness(" + brightness + "%");

$(".button-class-here").on( "click", function() {
    var imageId = $(this).data("image-id");
    brightness -= 10;
    darkenImage(imageId, brightness);