如何通过Javascript获取窗口宽度

Question

I am looking for some help concerning my Jquery. I have an animation, that is opening a navigation menu, running from the right window site into the middle. What I want to do now is: When the user is reducing the browser window width (lets say in a step of 100px), the Animation should run a 100px less into the middle. Below you can the the short version of my code. Is there a way to define the width using the value of a class, that I have written in my css?

$(".slide-left").click(function(){
            $("#navibox").animate({ width: 863 }); });

Answer 1

You cannot define the width with the value in a class. Although to get the width of the window itself, you can use

window.innerWidth

If you'd like to have some code run when you resize you can add an eventListener, with the event name of 'resize' like this.

window.addEventListener('resize', (e)=>{})

The event passed from that callback has the property 'target' which is the window instance that you can grab the innerWidth from again.

If you have to update the animation with some new evaluated width, you can do it there.

Answer 2

Thanks! I already tried something like this:

$(window).resize(function(){
if ($(window).width() > 1000) { mywidth = 863; }
if ($(window).width() < 1001 && $(window).width() > 959 ) { mywidth = 823; }
if ($(window).width() < 960) { mywidth = 783; }
});```

In the animation I used:

```$("#navibox").animate({ mywidth });```

But that did not work...