javascript - jQuery animate()控制点击的不透明度

这就是我想要的。我想要当您单击按钮在300毫秒内从0透明度变为1透明度。问题是，当我单击按钮时，它没有动画！真令人沮丧。这是代码：

$(".ps").css("opacity", "0");
var showStuff = function() {
  $("#div").click(function() {
    $("#phi").animate({
      opacity: "1"
    }, 300, function() {
      $("#pname").animate({
        opacity: "1"
      }, 300);
    });
  });
}

最佳答案

0和1是数字，而不是字符串。而且您不是通过执行该语句来调用showStuff()。如果要执行此操作，则需要通过在showStuff();中调用$(function () {});将其绑定到事件。

$(".ps").css("opacity", 0);
var showStuff = function() {
  $("#div").click(function() {
    $("#phi").animate({
      opacity: 1
    }, 300, function() {
      $("#pname").animate({
        opacity: 1
      }, 300);
    });
  });
}

您需要调用showStuff();：

showStuff();

片段

$(".ps").css("opacity", 0);
var showStuff = function() {
  $("#div").click(function() {
    $("#phi").animate({
      opacity: 1
    }, 300, function() {
      $("#pname").animate({
        opacity: 1
      }, 300);
    });
  });
}
showStuff();

#div {cursor: pointer;}
#phi {background: #99f; padding: 15px;}
#pname {background: #9f9; padding: 15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div">#DIV - Click Here</div>
<div class="ps" id="phi">#PHI.ps</div>
<div class="ps" id="pname">#PName.ps</div>