Question

如果fadeOut中的所有内容都已完全加载并准备好显示后，如何才能使下面的内容重新显示？发生的事情是文本框右上角的图像在第一次加载令人讨厌的页面时是跳跃而不是平滑淡入。

请不要问我刚建好的网页设计大声笑

//车内儿童安全苏格兰

        $("#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   
          }
        });

Answer 1

目前没有告知您的fadeIn等待淡出回调完成。只需在fadeIn()回调中移动fadeOut。

$('#something').fadeOut(600, function() {
    //fadeOut callback operations here
    $(this).fadeIn(600); //now we're ready to fade in
});

Answer 2

您必须将“* content_1 *”的 .fadeIn 功能绑定到img节点上的 .load （ childbig2 ）：

$("#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（）函数时都会排队（调用）。

此致

Jquery只有在加载图像后才能使fadeIn工作

2 个答案: