SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fadeIn and fadeOut problem in IE, Opera, Safari

    Hi, here is the site I am having trouble keeping consistent through all the browsers. www.designyp.com
    When you click on thumbnails, the large image above should transition through fading effect in to another image and it does it perfectly in Chrome. However, in some browsers when you click on the thumbnail for the first time it will fadeOut and then Fade in the same image and then abruptly change it to the new image. It will do it only once for each thumbnail, and then it will do its fading effect as it supposed to. What is going on?
    It works fine in Chrome, but not in IE, Opera, Safari.
    This is JQuery script for the fade effect:
    $(document).ready(function(){
    $("h2").append('<em></em>')
    $(".sc_menu a").click(function(){

    var largePath = $(this).attr("href");
    var popupimgPath = "";
    var largeAlt = $(this).attr("id");


    $("#largeImgClicker").removeAttr("href")


    if(typeof $(this).attr("popupimg") != 'undefined'){
    popupimgPath = $(this).attr("popupimg");
    $("#largeImgClicker").attr({ href: popupimgPath });
    }


    $('#fadeBlock').fadeOut('slow', function(){
    $("#largeImg").attr({ src: largePath, alt: largeAlt, popupimg: popupimgPath });
    $("h2").html(" " + largeAlt + " ");
    $('#fadeBlock').fadeIn('fast');
    });

    return false;
    });
    and this is the HTML:
    <div id="fadeBlock">
    <a class="fancybox" rel="group" href="img/thisWeekInWashLong.jpg" id="largeImgClicker"><img src="img/thisWeekInWash.jpg" alt="Large image" id="largeImg" popupimg="img/thisWeekInWashLong.jpg" /></a>
    </div>
    <h2>This Week In Washington</h2>
    <div class="sc_menu">
    <ul class="webT" id="webThumbs" input type="image" value="Go">
    <li><a href="img/thisWeekInWash.jpg" popupimg="img/thisWeekInWashLong.jpg" id="This Week In Washington" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('thisWeekInWash','','img/keyContactThumbON.jpg',1)"><img src="img/keyContactThumbBlur.jpg" alt="This Week In Wash Newsletter" name="thisWeekInWash" width="126" height="82" border="0"></a></li>
    <li><a href="img/caissons.jpg" popupimg="img/caissonsLong.jpg" id="Caisson Case Study Discussion Forum" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('caissons','','img/caissonsThumbON.jpg',1)"><img src="img/caissonsThumbBlur.jpg" name="caissons" width="126" height="82" border="0"></a></li>
    <li><a href="img/asceSite.jpg" popupimg="img/asceSiteLong.jpg" id="ASCE Home Page" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('asceHomePage','','img/asceWebThumbON.jpg',1)"><img src="img/asceWebThumbBlur.jpg" alt="ASCE Home Page" name="asceHomePage" width="126" height="82"/></a></li>
    <li><a href="img/sustainability.jpg" id="ASCE Committee on Sustainability Site" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sustainability','','img/sustainabilityThumbON.jpg',1)"><img src="img/sustainabilityThumbBlur.jpg" name="sustainability" alt="ASCE Committee on Sustainability" width="126" height="82"/></a></li>
    </ul>
    </div>

  2. #2
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was missing preloader


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •