text to image rollover with fade in/out

Question

I have found and tinkered with a good way to create a text to image rollover, here: http://jsfiddle.net/pkZAW/12/

    $( function() {
  $("#imglink").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});

However, I need the transitions in and out to be faded, as it is on the thumbnail images here: http://lydiafraserward.co.uk/index.php?page=producing

After much searching around, I've not been able to add this transition to the script :-? .. any ideas..?

erwin_smit · Answer 1 · 2012-11-16T08:41:00.417

1

I don't think live() is required for this situation. I wouldn't use fadeout on the mouseleave function because the animations will stack up.

You could also try this:

$( function() {
    $("#imglink").hover(
    function () {
        $(this).attr('small',$(this).html());
        $(this).stop(false,true).fadeOut(250,function() {
            $(this).html($(this).attr('full'));
            $(this).stop(false,true).fadeIn(250);
        });
   }, function () {
        $(this).html($(this).attr('small'));

   });
  });

Edit: the flicker effect is fixed using a span tag around the anchor tag: Demo: http://jsfiddle.net/LYjvp/1/

edited Nov 16 '12 at 08:41

answered Nov 15 '12 at 16:10

erwin_smit

680
6
12

hey thanks for your reponses! It does seem to work, though the image appears to stay visible/flickers if one runs over it too quickly. Is there a way to definitively stop this? I altered the tag to display:block as i'd like the text link to be the same size as the image, though this does not appear to have made a difference.. http://jsfiddle.net/9qeZv/33/ – thomsonson Nov 15 '12 at 18:03
To fix this I think you need to wrap a span tag around it. See this DEMO: http://jsfiddle.net/LYjvp/1/ – erwin_smit Nov 16 '12 at 08:37
Hi, i've been trying out the solution with the added, but it still appears to break if the mouse runs over it too fast. Either the image gets stuck or both image and text disappear.. – thomsonson Nov 16 '12 at 10:55
Yeah you are right, I think you should split the image and text to make it more solid. Test this fiddle and let me know what you think: http://jsfiddle.net/6A5UY/1/ – erwin_smit Nov 16 '12 at 12:34
Many thanks erwin_smit! That works smoothly now! However, is it possible to do this without using css positioning for the rollover? I need to put the rollover onto a page which uses jquery super slider (http://nicinabox.github.com/superslides/). Unfortunately the css positioning with the rollovers conflicts with the css positioning used by Super Slider. As a result, the rollover image jumps around a;; over the place if the screen is resized.. you can see what I mean here: http://lydiafraserward.co.uk/index.php?page=test – thomsonson Nov 16 '12 at 13:00

text to image rollover with fade in/out

1 Answers1