我怎样才能使jquery.css不动画，而立即进行更改？

Question

Everything below is tested in Chrome, on OSX.

Take a look at the main image at this website I'm building: http://www.appsbayou.se

As you can see when you load the page, the image looks like it's "sliding" to it's correct position. I don't want this behaviour.

The code behind this page is from a custom wordpress theme and in this matter I have no say. My only job is to "fix the image so it doesn't do an animation".

In the source code I've found that these lines are the culprit:

$(this).css("width", new_img_width);
$(this).css("max-width", new_img_width);

where $(this) refers to the <img> tag. There is no .animate() here. Then why is a simple changing of width/maxwidth with jQuery doing so with an animation and how can I make those lines instant instead?

Answer 1

remove

img {
transition: width 0.5s ease-in-out 0s, 
            left 0.7s ease-in-out 0s,
             right 0.7s ease-in-out 0s;
}  

from

http://www.appsbayou.se/wp-content/themes/customizr/inc/assets/css/orange.min.css?ver=3.1.24

at line 15

Answer 2

If you do an "Inspect Element" on the image, you'll see it is contained in a set of div s that employ a carousel scheme. There are several things you can do. One is to edit the page HTML and get rid of the container divs. That may have some unwanted side effects though with respect to formatting.

Another option may be to iterate up the parent chain of $(this) and start selectively removing classes from containing divs. For example get rid of the center-slides-enabled class and see what happens. Without knowing more about the structure of the carousel (you're using minified Javascript wrappers so it's sort of hard to know what's going on) I can't say exactly what the right class to get rid of is, but with some trial-and-error I think you should be able to figure out pretty rapidly what you need to do.