CODEWITHSUNDEEP
jqueryrollovers
thomsonson
thomsonson

Reputation: 41

text to image rollover with fade in/out

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..?

Upvotes: 4

Views: 395

Answers (1)

erwin_smit
erwin_smit

Reputation: 700

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/

Upvotes: 1

Related Questions