0

別の関数を促すイベントリスナーを備えた関数があります。イベントリスナーの前は、関数は完全に正常に機能していました。発生すると想定されるのは、テキストがそれぞれのdivにロードされ、終了するとアニメーション関数が発生することです。アニメーション機能により、何らかの理由でテキストの読み込みがスキップされます。

これがJSBINのセットアップですhttp://jsbin.com/umohoj/11/edit

そして、ここでは.loadのURLにあります（eventlistnerでは機能しませんが）

http://www.klossal.com/b_test.html

これは、アニメーションなしのロードのみの実例です。

http://www.klossal.com/b_testa.html

これは、ロードが終了するのを待つアニメーションではなく、ロードを1つの関数として使用するアニメーションの実例です。これは、アニメーションの一部の計算でロードを終了する必要があるため、私が望んでいることです。正しく動作します。

http://www.klossal.com/b_testb.html

これは、何らかの理由でロードが機能しないようにするイベントリスナーを含むコードです。

$(".name").click(function() {
  var id = $(this).attr('id');

  $('#photo_850').empty();

  $("<img>", { src: id + ".jpg" }).prependTo("#photo_850");

  $("#name_850").load(id +"_name.txt");

  $("#credentials_850").load(id +"_credentials.txt");

  $("#bio_850_text").load(id +"_bio.txt", function() {
    $("#bio_850_img").css({
    marginTop: ($("#bio_850_text").innerHeight() /2) -   
    ($("#bio_850_img").height() / 2)
    });                                                                     
  });

  $("#edu_850_text").load(id +"_edu.txt", function() {
    $("#edu_850_img").css({
    marginTop: ($("#edu_850_text").innerHeight() /2) -   
    ($("#edu_850_img").height() / 2)
    });                                                                     
  });

  $("#contact_850_text").load(id +"_contact.txt", function() {
    $("#contact_850_img").css({
    marginTop: ($("#contact_850_text").innerHeight() /2) -   
    ($("#contact_850_img").height() / 2)
    });                                                                     
  });






}, function() {




  $("#container_1").animate({
     height: 87 + $("#box_2_850").height() + $("#box_3_850").height() +     
$("#box_4_850").height()
  }, 300);

  $("#container_1_txt").animate({
     "margin-top": $("#container_1_txt").innerHeight() * -1
  }, 300);

    $("#box_1_850").delay(160).animate({
     marginTop: 15
  }, 300);

    $("#box_2_850").delay(330).animate({
     marginTop: 0
  }, 450);  

    $("#box_3_850").delay(450).animate({
     marginTop: 0
  }, 450);  

    $("#box_4_850").delay(570).animate({
     marginTop: 0
  }, 450); 










                 });
4

1 に答える 1

1

徹底的な調査の後;）私には解決策があります！ハハ

$("#container_1").css({
  'height': $("#container_1_txt").innerHeight()
});

$("#box_1_850").css({
  'marginTop': $("#container_1_txt").innerHeight()
});

$("#box_2_850").css({
  'marginTop': $("#container_1").height()
});

$("#box_3_850").css({
  'marginTop': $("#container_1").height()
});

$("#box_4_850").css({
  'marginTop': $("#container_1").height()  
});


var x1, x2, x3; //Establish Loading Variables 

$(".name").on('click' , function() { 

  x1=0; //Reset the Loading Variables
  x2=0;
  x3=0;

  var id = $(this).attr('id');

  $('#photo_850').empty();

  $("<img>", { src: 'http://www.klossal.com/' + id + ".jpg" }).prependTo("#photo_850"); 

  $("#name_850").load(id +"_name.txt");

  $("#credentials_850").load(id +"_credentials.txt");



  $("#bio_850_text").load(id +"_bio.txt", function() {

    $("#bio_850_img").css({
    'marginTop': ($("#bio_850_text").innerHeight() /2) -   
    ($("#bio_850_img").height() / 2)
    });

    console.log('Loaded'); //Testing Purposes Only
    x1=1; // Loaded
    animate(); // Attempt Animation

  });

  $("#edu_850_text").load(id +"_edu.txt", function() {

    $("#edu_850_img").css({
    'marginTop': ($("#edu_850_text").innerHeight() /2) -   
    ($("#edu_850_img").height() / 2)
    });

    console.log('Loaded'); //Testing Purposes Only
    x2=1; // Loaded
    animate(); // Attempt Animation

  });

  $("#contact_850_text").load(id +"_contact.txt", function() {


    $("#contact_850_img").css({
    'marginTop': ($("#contact_850_text").innerHeight() /2) -   
    ($("#contact_850_img").height() / 2)
    });

    console.log('Loaded'); //Testing Purposes Only
    x3=1; // Loaded
    animate(); // Attempt Animation
  });






});




function animate() {

  if((x1===1) && (x2===1) && (x3===1)){ //Animate if all thre divs are loaded



  $("#container_1").animate({
     'height': 87 + $("#box_2_850").outerHeight() + $("#box_3_850").outerHeight() + $("#box_4_850").outerHeight()
  }, 300);

  $("#container_1_txt").animate({
     'margin-top': $("#container_1_txt").innerHeight() * -1
  }, 300);

    $("#box_1_850").delay(160).animate({
     'marginTop': 15
  }, 300);

    $("#box_2_850").delay(330).animate({
     'marginTop': 0
  }, 450);  

    $("#box_3_850").delay(450).animate({
     'marginTop': 0
  }, 450);  

    $("#box_4_850").delay(570).animate({
     'marginTop': 0
  }, 450); 

 }

}
于 2012-11-16T05:28:38.407 に答える