1

以下をフェードアウト内のすべてのものが完全にロードされて表示する準備ができた後にのみフェードインするようにするにはどうすればよいですか？何が起こっているのかというと、テキストボックスの右上隅にある画像がジャンプしていて、最初にページを読み込んだときにスムーズにフェードインしないので、煩わしいです。

PSは私がちょうどそれを構築したウェブページのデザインについて尋ねないでください笑

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

「*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);  
});

jQuery1.7.xで.offの新しい機能を使用できます。

.load（）のバインドは、「イメージがロードされたときにXXを実行する」ことを意味することに注意してください。この場合、「親のfadeIn（）を実行してください」。

IExplorerキャッシュの互換性についても、最初に.load（）を使用し、次に.attr（）を使用します。

バインドを解除することを忘れないでください（off（）関数）。そうしないと、load（）関数が適用されるたびにキューに入れられます（呼び出されます）。

よろしく

于 2012-07-11T11:15:33.253 に答える
0

Your fadeIn is not currently being told to wait for the fade out callback to finish. Just move your fadeIn() inside the fadeOut callback.

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