How to edit 'clip' CSS property in JQuery?

Question

I need to edit this 'clip' CSS property:

#bulb_light {
   position: absolute;
   clip:rect(260px, 160px, 260px, 0px);
}

But not normally, rather, thanks to Jquery's help, so I tried this:

//CSS editing :

$("#bulb_light").css('clip', function () {
        return 'rect(' + newy + 'px, 160px, 260px, 0px);';
    });

which is inside a click event:

$('#Wsender').click(function () {
**//CSS editing** });

NOTE that 'newy' is the variable I created which should take the place of the first parameter of the 'clip' property:

rect(newypx, 160px, 260px, 0px);

meant to be like that.

The issue is that the code is not working when I add this feature with JQuery, but I've found it right in here on StackOverflow. What might be wrong?

Here is the full source code for reference.

Answer 1

Just a minor issue, you can't put a semi-colon at the end of the CSS value for this to work:

$("#bulb_light").css('clip', function () {
    return 'rect(' + newy + 'px, 160px, 260px, 0px)' /* <-- Removed semicolon */;
});

Additionally, I'm not sure where newy is defined, you may not need a function callback for this unless newy is to be calculated for each element:

$("#bulb_light").css('clip', 'rect(' + newy + 'px, 160px, 260px, 0px)');