Take the 2-minute tour ×

How can I use Jquery to change image on hover with slide up transition? I've searched on the internet but I can't found a working code. All codes that I've found use fadeIn or fadeOut. Thank you very much!

This is the code that I found, but it uses fade in and out:

$(function() {
  $(this).slideUp('fast', function(){
    $(this).attr('src', $(this).data('on'));

    $(this).attr('src', $(this).data('off'));

AND html:

<img class="change" src="images/portofoliu/next.gif" data-on="images/portofoliu/prev.gif" data-off="images/portofoliu/next.gif">
share|improve this question
see api.jquery.com/slideUp –  Ryan Erickson Apr 13 '13 at 4:14
You can use CSS3 for all that animation –  ameya rote Apr 13 '13 at 4:19
Yes, I know that CSS 3 is a good option, but IE doesn't like CSS3... –  Geo Apr 13 '13 at 4:26

1 Answer 1

up vote 1 down vote accepted
<div id="clickme">
  Click here

$('#clickme').hover(function() {
  $('#book').slideUp('slow', function() {
    // Animation complete.



EDIT: Final Solution: http://jsfiddle.net/hellomynameisluc/frTFw

share|improve this answer
It doesn't work in the jsfiddle? Or when you implement it? –  luclabs Apr 13 '13 at 4:39
Is your jquery version up to date? –  luclabs Apr 13 '13 at 4:43
Oh I see. That's a bit more involved. Give me a minute to find something. –  luclabs Apr 13 '13 at 4:46
Did you mean something like this but with a hover? jsfiddle.net/LPkZZ/8 –  luclabs Apr 13 '13 at 4:48
Almost Got Something. –  luclabs Apr 13 '13 at 5:12

Your Answer


