gtilflm gtilflm - 2 months ago 9
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 (https://jsfiddle.net/twLxa3o7/) 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

I've updated your fiddle to make it work: https://jsfiddle.net/1q3mtm1e/

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);
});