0

我有一个带有事件侦听器的函数，然后会提示另一个函数。在事件侦听器之前，该函数工作得非常好。假设发生的是假设文本被加载到各自的 div 中，然后当它们完成时，假设会发生一个动画功能。由于某种原因，动画功能会导致文本加载被跳过。

这是设置的 JS BIN http://jsbin.com/umohoj/11/edit

它在 .load 的 url 上（即使它们不能与 eventlistner 一起使用）

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

这是一个没有动画的负载的工作示例：

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

这是一个将负载作为一个功能的动画的工作示例，而不是等待负载完成的动画，这是我想要发生的，因为负载需要完成动画中的某些计算正常工作。

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 回答