CODEWITHSUNDEEP
jqueryhtmlimagefade
Morten Hagh
Morten Hagh

Reputation: 2113

image fadein without blink with jquery

I am trying to fade in an image when I click on a link, but that gives me a "blink" on every fade. Is there anyway to avoid this blink and just have a clean fadeIn?

This is my current code:

function changeMortar(mortar) {
     var html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'                    
        $("#fuge-color").hide().html(html).fadeIn('slow');
    }​

I have made this example http://jsfiddle.net/BHCam/14/

It fades to white and then into the mortar I selected. What I want is to have my selected mortar, fade over the old mortar.

Upvotes: 0

Views: 2182

Answers (4)

mahsa.teimourikia
mahsa.teimourikia

Reputation: 1774

I have made some changes to your code. Try like this in HTML:

<div id="slideshow">
   <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeGraa.png" alt="" class="active" width="500" height="300"/>
   <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeAnthrazit.png" width="500" height="300" />

</div>
<a href="#" class="change-mortar-link" onclick="slideSwitch();">Change mortar</a>

In CSS:

#slideshow {
   position:relative;
   height:350px;
}
#slideshow IMG {
  position:absolute;
  top:0;
  left:0;
  z-index:8;
}
#slideshow IMG.active {
   z-index:10;
}
#slideshow IMG.last-active {
   z-index:9;
}

And The JavaScript code:

function slideSwitch() {
   var $active = $('#slideshow IMG.active');

   if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

   var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
          $active.removeClass('active last-active');
     });
  }

And in here you can find more information. And here is the running example in JsFiddle.

Upvotes: 1

Marcin Orlowski
Marcin Orlowski

Reputation: 75629

Blinking and other artifacts like this are likely caused by your browser or your graphics card drivers, so there's not much you can do beside checking your graphics settings tuning or upgrading your machine components. Your example fades smoothly here.

Upvotes: 4

Alex Ball
Alex Ball

Reputation: 4474

Could you try with animate:

function changeMortar(mortar) {
 var $html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'                    
     $("#fuge-color").animate({ opacity: 0.8 }, 'fast', function(){
          $(this).html($html).animate({ opacity: 1 }, 'fast');
     });
}

Upvotes: 1

GautamD31
GautamD31

Reputation: 28763

Just change it to 

 $("#fuge-color").hide().fadeIn('slow'); //use slow,fast,1000,2000,3000

Choose your best result

Upvotes: 1

Related Questions