1

在fadeOut 中的所有内容都已完全加载并准备好显示后，如何让下面的内容仅淡入？发生的事情是文本框右上角的图像在您第一次加载页面时跳跃并且不平滑淡入，这很烦人。

ps不要问我刚建的网页设计lol

http://goodeggsafety.com/dev/

//车内儿童安全苏格兰

        $("#link_1").click(function(e) {

         e.preventDefault();

         var img = $("#childbig2").attr('src');//Get current image

         if(img != 'images/childbig.png'){ //Check if current image is the clicked image if not carry on..
            //Variables
             var imgurl = 'images/childbig.png';
             var flag = 'images/scotland.png';
             var html = 'Visit the Scottish<br /> In-Car child safety<br /> campaign website. <br /><br /> Expert advice on seat and stage selection for your child. <br /><br />';
                 html = html + 'Car seat checking clinics - check<br /> when and where they are in your<br /> area for you to attend and have<br /> your seat checked by a Good Egg<br /> In-Car Expert. <br /><br /> News updates, competitions and much much more.';

             var linkurl = 'http://www.protectchild.co.uk/';//Link url 

              $("#content_1").fadeOut(600, function(){//fade out
                  $("#childbig2").attr('src', imgurl);//change image
                  $("#childbig2").attr('alt', 'In-Car Child Safety');//change image alt tag
                  $("#title_img").attr('src', flag);//change flag
                  $("#title_h2").html('Scotland');//change title
                  $("#text_title").html('In-Car Child Safety'); //Change second title
                  $("#text_content").html(html);//Change main text content
                  $("#weblink").attr('href', linkurl);//Change link url
                  $("#weblink").attr('title', linkurl);//Change link title
                  $("#arrowlink").attr('href', linkurl);//Change link on arrow url
                  $("#arrowlink").attr('title', linkurl);//change link on arrow title    
              }).fadeIn(600);//fade in speed, miliseconds   
          }
        });
4

2 回答 2

0

您fadeIn目前没有被告知等待淡出回调完成。只需将您的回调移动fadeIn()到内部即可。fadeOut

$('#something').fadeOut(600, function() {
    //fadeOut callback operations here
    $(this).fadeIn(600); //now we're ready to fade in
});
于 2012-07-11T10:11:52.653 回答
0

您必须将"*content_1*"的.fadeIn函数绑定到img 节点 ( childbig2 ) 上的.load：

$("#content_1").fadeOut(600, function(){
  var $content = $(this);
  var $childbig2 = $("#childbig2");

 $childbig2  
    .load(function() {
        $childbig2.off('load');
        $content.fadeIn(600); //fade in speed, miliseconds 
    })
    .attr('src', imgurl)
    .attr('alt', 'In-Car Child Safety') //change image alt tag

  $("#title_img").attr('src', flag);
  $("#title_h2").html('UK');
  $("#text_title").html('In-Car Child Safety'); 
  $("#text_content").html(html);
  $("#weblink").attr('href', linkurl);
  $("#weblink").attr('title', linkurl);
  $("#arrowlink").attr('href', linkurl); 
  $("#arrowlink").attr('title', linkurl);  
});

你可以在 jQuery 1.7.x 上使用 .off 全新的特性。

请注意，绑定 .load() 意味着：“加载图像时执行 XX”。在这种情况下“做你父母的fadeIn()”。

也为了 IExplorer 缓存兼容性：首先使用 .load() 然后 .attr()

请记住取消绑定（off()函数），否则每次应用 load() 函数时都会排队（调用）。

问候

于 2012-07-11T11:15:33.253 回答