Question

我正在学习JQuery。当选择新图像时，我需要使旧图像淡出并且新图像淡入。我有选择图像的代码，但现在我需要将它放在一个回调方法中，该方法淡化当前图像并淡入新图像。衰落持续时间为1秒。我试图完成这个。任何帮助，将不胜感激。我到目前为止的代码是：

$(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 caption = $(this).attr("title");
    var imageURL = $(this).attr("href");
    $("#caption").text(caption);
    $("#image").attr("src", imageURL);
    // cancel the default action of the link
    evt.preventDefault();
  });
});

<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Image Swap</title>
  <link rel="stylesheet" href="main.css" />
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="image_swap1.js"></script>
</head>

<body>
  <section>
    <h1>Ram Tap Combined Test</h1>
    <ul id="image_list">
      <li>
        <a href="images/h1.jpg" title="James Allison: 1-1">
          <img src="thumbnails/t1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="images/h2.jpg" title="James Allison: 1-2">
          <img src="thumbnails/t2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="images/h3.jpg" title="James Allison: 1-3">
          <img src="thumbnails/t3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="images/h4.jpg" title="James Allison: 1-4">
          <img src="thumbnails/t4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="images/h5.jpg" title="James Allison: 1-5">
          <img src="thumbnails/t5.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="images/h6.jpg" title="James Allison: 1-6">
          <img src="thumbnails/t6.jpg" alt="">
        </a>
      </li>
    </ul>
    <h2 id="caption">James Allison: 1-1</h2> 
    <p>
      <img src="images/h1.jpg" alt="" id="image">
    </p>
  </section>
</body>

</html>

Answer 1

这应该有效：

1）使图像淡出。

2）然后经过一定的延迟后，使用新值淡入。

public JsonResult GetReasonforLeave(int typecode)
        {

            var reason_list = itlbg1.LeaveReasons.Where(f => f.LeaveType_typeCode == typecode).Select(r => new { value = r.reasonID, text = r.description }); 
            return Json(reason_list, JsonRequestBehavior.AllowGet);

        }

$(document).ready(function() {
  $("#image_list a").click(function(e) {
    e.preventDefault();
    $('#image').fadeOut(500);
    change($(this)).delay(500);
  });
});

var change = function(img) {
  var caption = img.attr("title");
  var imageURL = img.attr("href");
  $("#caption").text(caption);
  $("#image").attr("src", imageURL);
  $("#image").fadeIn();
};

使用Callback方法停留在动画上

1 个答案: