Adding a animated ease in to a jQuery function

JavaScript
1

I’m trying to add an ease transition to this hover effect which switches out an image. I want it to fade in so the change is not as dramatic. Here is my function…

function onHover()
{
    $(".section").attr('src', 'assets/img/hover-image.jpg'); 
}
function offHover()
{
    $(".section").attr('src', 'assets/img/original-image.jpg'); 
}
2

Have you seen the fadeIn() and fadeOut()? Both fadeIn and fadeOut take options which of one is the easing to use. You can even use an option for specialEasing.

:slight_smile:

3

thanks. how would I combine that with what I have?

4

Well what you have is nothing but setting an attribute on an element with the class .section. So it if you want an element to fade out when hovered over, change the image, then fade back in then you would use something like…

Just a quick example (and one of many ways to do it) is shown at the pen below. But obviously you will need to tweak this, but you should get the idea.

Note: I am using ‘swing’ as the easing function here, but you can use one of many.

1 Like
5

If you want to do this nicely then you need to fade one image out at the same time as you fade a new image in.

You can’t just swap the source half way or the effect is too abrupt.

To explain what I mean here is an old codepen of mine that swaps an image on hover.

The images need to occupy the same space and you fade one in at the same time as you fade one out and you get the nice merge effect.

Sorry I can’t give a js version as away on holiday until the weekend and struggling to type on a mobile :slight_smile:

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.