Question

如果可能的话，我真的可以在作业中使用一些帮助。对于我当前的项目，我们的任务是单击时淡出上方列表中的图像。字幕也应淡入淡出并与图像一起淡入。我的旧图像和标题逐渐淡出，但是无法弄清楚如何使新图像和字幕淡入。下面的代码：

$(document).ready(function() {
  // preload images
  $("#image_list a").each(function() {
    var swappedImage = new Image();
    swappedImage.src = $(this).attr("href");
  });

  // set up event handlers for links    
  $("#image_list a").click(function(evt) {
    var imageURL = $(this).attr("href");
    $("#image").fadeOut('slow', function() {
      $("#image").load(function() {
        $("#image").fadeIn();
      }).attr("src", imageURL);
    });

    var caption = $(this).attr("title");
    $("#caption").fadeOut('slow', function() {
      $("#caption").load(function() {
        $("#caption").fadeIn();
      }).text(caption);
    });

    // cancel the default action of the link
    evt.preventDefault();
  }); // end click

  // move focus to first thumbnail
  $("li:first-child a").focus();
}); // end ready

Answer 1

在这种情况下，您可以放弃.load()，因为它似乎没有作用。从jQuery 3.0开始也将其删除。

我建议的另一件事是将重复的查询存储为变量，而不是一遍又一遍地进行相同的DOM查找。

$(document).ready(function() {
  var $image_list_a = $("#image_list_a");

  // preload images
  $image_list_a.each(function() {
    var swappedImage = new Image();
    swappedImage.src = $(this).attr("href");
  });

  // set up event handlers for links    
  $image_list_a.click(function(evt) {
    var $image = $("#image");
    var $caption = $("#caption");

    var imageURL = $(this).attr("href");
    $image.fadeOut('slow', function() {
      $image.attr("src", imageURL).fadeIn();
    });

    var caption = $(this).attr("title");
    $caption.fadeOut('slow', function() {
      $caption.text(caption).fadeIn();
    });

    // cancel the default action of the link
    evt.preventDefault();
  }); // end click

  // move focus to first thumbnail
  $("li:first-child a").focus();
}); // end ready

淡入和淡入列表中的图像

1 个答案: