Question

I’m trying to create a fade in effect using jQuery, html & CSS with no avail. Basically, it’s a navigation list with a gallery scroll effect using jQuery.. scrolling over contact link brings a popup with contact info and so on for services, about etc..

The gallery script I used can be found here

whenever I apply .fadein(slow), I get the desired affect but in reverse. Instead of fading from transparent to opaque:::you get the picture. I have also tried

.animate({opacity: '0.5'}, 1000)

with the same results as above

What my jOuery script looks like:

<script type>
$(document).ready(function() {
    // Image swap on hover
    $("#gallery ul li img").hover(function(){
        $('#main-img').stop().fadeTo('slow',0.3).siblings()
          .stop().fadeTo('slow',1.0).attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    // Image preload
    var imgSwap = [];
     $("#gallery ul li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>

The html:

<div id="left_nav">
    <div id="gallery">
     <img src="images/gallery/home.png" alt="" id="main-img" />
      <ul>
        <li class="home"><img src="images/gallery/thumb/home.png" alt="" /></li>
        <li class="about"><img src="images/gallery/thumb/About Us.png" alt="" /></li>
        <li class="contact"><img src="images/gallery/thumb/Contact Us.png" alt="" /></li>
        <li class="services"><img src="images/gallery/thumb/Services.png" alt="" /></li>
      </ul>
    </div> 
  </div>

I have also tried reversing the opacity settings because it would seem like common sense. This results in an opaque affect only, no fade in. What I’m shooting for is a fade in affect for hover state of thumbs. Also, fade script doesn’t seem to work in IE 8. Any ideas?

Answer 1

Wow, some chaining going on here. Why do you have to fade in the siblings as well (i.e. the ul tag) ? Maybe you meant this?

$('#main-img').attr('src', $(this).attr('src').replace('thumb/', '')).stop();
$('#main-img').hide();
$('#main-img').fadeIn();

It’s deliberately unchained. For some reason, chaining the hide and fadeIn calls together can make it stop working in some browsers, like IE.