How to disable animation for image resizing

basilaldossary · July 2015

Dears

This is my website. http://mohdabdulbari.com/almayas/

The issue in reviews section, (every 5 seconds I hide review and show next one )

Whenever I .show or .hide in jquery, animation still working, even I've removed all classes for image divs, I've figured it out that happen with any image if I try to resize in F12 tools on browser

Could you please locate the code for that so I can remove it or prevent it from doing it on my reviews section

Albert · July 2015

Hi,

we are not sure what you mean exactly. You wish to deactivate animation for "Reviews" section where image and star rating are?

basilaldossary · July 2015

Yeah, but the issue is not with animation,

the issue if you go to any image in the theme, and resize it from HTML, for example

http://mohdabdulbari.com/almayas/index.php/2015/05/27/chicken-wings/

go here, inspect element for image change width of img element to 200 for example

see how the animation works, I want to cancel this animation, it doesn't re-size directly, it shows animation of being shrinked(getting small) to smaller size

Albert · July 2015

Sorry but we are still not sure what you mean. We did what you want and everything seems to be fine. Will be great if you can send us a screenshot of what you mean because probably something what is ok for us, may be not good for you.

basilaldossary · July 2015

Ok I'll upload a video of the issue, cuz screenshot wont show the issue I'll be back in mins

basilaldossary · July 2015

Do exactly as the video, I believe video was bad quality even doesnt show animation, but when you follow the video please notice the different from first image(on betheme) and another image(my index page http://mohdabdulbari.com)

my image profile changes size directed with no getting bigger or smaller animation but on Betheme it has an animation that I couldnt detect where is the code so I can cancel it

Please kindly watch the video here:

https://drive.google.com/file/d/0B_xmvnBDDDedb2JwSXhLY2xnbkE/view?usp=sharing

Albert · July 2015

Sorry but we do not see anythnig wrong on this video. This works exactly as should work. Maybe we'll ask a different way. Do you want to remove this effect on hover (links comes from bottom, mask shows and images moves up)? Is that what you want to do?

basilaldossary · July 2015

Just do the same as what shown in the video

you would notice pics has something like this: http://www.pureexample.com/jquery-ui/resize-animation.html

go the link above click on square edge resize it to big size, see how square getting bigger(which animation)

normal way it would be sudden change in size with no effects or animation

which is exactly the issue I'm facing, you have same thing in all images and it is not CSS I guess and I'm not sure where is the code for that

basilaldossary · July 2015

plz dont tell me you didnt get it I sent all explains video and an example and I've written explanations

enter my website and check difference in 2 images shown in video

btw I'm using windows 8 with Chrome, so in case animation doesnt show up on your broswer

Albert · July 2015

We have checked in Chrome already and we are not sure if we think about the same but this effect is related with hover. So you can use below css but this will remove effect on any hover action as well. And we just tell you that it is not possible to split image resizing and hover action.

.image_frame .image_wrapper img, .image_frame .image_wrapper .mask::after, .image_frame .image_wrapper .image_links { transition: all 0s ease-in-out 0s; -moz-transition: all 0s ease-in-out 0s; -webkit-transition: all 0s ease-in-out 0s; }

basilaldossary · July 2015

Sir my issue is clear, not hover at all, I'm resizing an image after all not hovering images

I've recorded a clear 2 video for the issue, The issue occurs when changing image width or height

one with issue another with no issue

unwanted animation: https://drive.google.com/file/d/0B_xmvnBDDDedeVRIQzF4NkdDazA/view?usp=sharing

want it same as standard resize with no animation

normal behavior when change image size: https://drive.google.com/file/d/0B_xmvnBDDDedQVphQlVDNHVwMEU/view?usp=sharing

Albert · July 2015

So from the videos you sent, we gave you css above that is responsible for this "unwanted animation". This is the only css which will remove this animation and please notice there is no other way to remove it.

basilaldossary · July 2015

Could you please locate CSS location where this code inserted, which CSS file?

Albert · July 2015

It's css/shortcodes.css file.

How to disable animation for image resizing

Comments