Search jQuery

jQuery Forum

Toggle image source with fade effect

in Using jQuery • 8 years ago

Here is my code: http://codepen.io/vkhu/pen/Eammve

I'm trying to create a cover swap effect for a book. Basically, I want the image source to change from img1.jpg to img2.jpg when I press the "back cover" line. If I press the "back cover" line again, the source changes back to img1.jpg. Also, when the covers are swapping, there will be a fade effect.

I can only do the img1->img2, but not the other way. And I have no clue how to make a fade effect. Can anyone help my please?

Replies(3)

jakecigar

Re: Toggle image source with fade effect

8 years ago

http://codepen.io/anon/pen/ByRRYL is a clean way to do it. Both images are loaded early enough to prevent flicker.

JΛ̊KE

Long Nguy..

Re: Toggle image source with fade effect

8 years ago

This would have been perfect, but the thing is this 'book' will be placed inside a div tag, which use padding to determine its height. I can't set a fixed height because I want the background to change size dynamically when the element within rearrange to fit a mobile device.

If the explanation is hard to follow, here is the demo code: http://codepen.io/vkhu/pen/mymmzV

jakecigar

Re: Toggle image source with fade effect

8 years ago

The only thing I was showing is how to get 2 images to fade from one to another, You can add the CSS to make it your own.

JΛ̊KE

Top Reply

Response title

Attachments

jQuery Forum

Toggle image source with fade effect

Replies(3)

Re: Toggle image source with fade effect

Re: Toggle image source with fade effect

Re: Toggle image source with fade effect

Statistics

Tags

Actions