Try jQuery, it already has all functions you need to do that and it works with all browsers (including old IE that doesn't support opacity, jQuery uses "filter" for it). Then your first code would be like this:

$('#resize').fadeOut(1000);

and your second code would look like this:

$('#resize').animate({width: 0}, 1000);

As for why your second code didn't work: you didn't assign units to it. Correct code would be this:

Try jQuery, it already has all functions you need to do that and it works with all browsers (including old IE that doesn't support opacity, jQuery uses "filter" for it). Then your first code would be like this:

$('#resize').fadeOut(1000);

and your second code would look like this:

$('#resize').animate({width: 0}, 1000);

As for why your second code didn't work: you didn't assign units to it. Correct code would be this:

resizeIt.style.width is a string, not a number, initial value for it is "500px". parseInt() is a function that converts it to a number, so "500px" changes to 500. Then -50 changes it to 450. After that adding string to it converts 450 (number) to "450" (string) and appends "px" to it, so it becomes "450px".

So, the only reason why we didn't have to do this to the opacity value is because it is already an integer number and what makes WIDTH different from opacity is that it needs to be specified as pixels in order for the browser to understand it, in other words the original value thrown be the browser was 500px and in order for the browser to make the change requested be Javascript it needed a pixel value in return, is this correct?

Now how does it know to subtract 50pixels every second in the previews example for the opacity we used “-=50 “which subtracts 50 every interval but in this case you used (parseInt(resizeIt.style.width) - 50) + 'px'; which to me it subtracts 50 and final value should be 450, unless the browser remembers (keeps track of the remaining number)the last value and then it subtracts using the remaining value?

Width: not entirely correct. Just because initial value was in pixels, doesn't mean new value has to be in pixels too. You can set any value that browser understands, such as 20%, 20em or 20px. If you want to get width in pixels regardless of what units are used to set it, use jQuery's width() method or if you want it without jQuery, use clientWidth property (for example, element.clientWidth). There are many different variables that show width differently, clientWidth is the one you'll usually need.

Animation: it gets current element width using element.style.width. It works only because you've set initial value via inline css in pixels, if you would set it in percentages your code wouldn't work and you'll gave to use clientWidth to get it. That would be the proper way of getting width, usually you shouldn't be using style.width, but it works perfectly for your code.