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{}；内

你需要称之为showthing；：

片段

$.ps.cssopacity，0； var showStuff=函数{ $div.clickfunction{ $phi.animate{ 不透明度：1 }，300，功能{ $pname.animate{ 不透明度：1 }, 300; }; }; } 展示品； div{cursor:pointer；} phi{背景：99f；填充：15px；} pname{背景：9f9；填充：15px；} DIV-单击此处 PHI.ps

---

ps如果使用jQuery，为什么不使用fadeIn和delay

这是一把小提琴——

---

如果您刚刚起步，您可能会想，将内容、样式和功能分开，并将其模块化会有多大帮助。在这种情况下，我不会在HTML中添加一个onClick

HTML

---

你在哪里调用函数showthing？这是代码笔代码：@N.Spagnolo你看到我完整的答案了吗？天哪，我很抱歉。我真是个笨蛋。我没有使用onclick属性。。。脸谱hard@N.Spagnolo您不需要使用onclick属性。请停止粗体显示文本。一个原因是，fadeIn一开始显示为“无”，这并不总是理想的。因为它不占用任何空间？很抱歉提出这个问题，但我对javascript/jQuery和开发基本上还是比较陌生的。我对最佳实践非常好奇。如果你有对功能很重要的内容——或者SEO、屏幕阅读器或辅助技术等——那么你不一定希望这些内容在显示中“隐藏”：隐藏；方法您可以执行高度0溢出隐藏。。或者别的什么，避免这样。尽管如此，它仍然有一席之地。此外，jQuery animate是fadeIn等的幕后推手，它的平滑度可能会低于预期。Velocity.js对此很有帮助。想了解一些信息，谢谢你的提示！每当我编写代码时，我都会用到这些技巧。从有经验的人那里听到消息真的很有意义。确保在整个旅行过程中投票选出所有对你有帮助的答案。对于代码审查，也有一个特定的网站，该网站不能投票。我没有15个名声。让我的个人资料像3天前一样。当我有能力的时候我会的。

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

showStuff();

$("#div").click(function() {//dumbest id name for a div ever
    $("#phi").fadeIn(500);
    $("#pname").delay(1500).fadeIn(500);//wait a 1.5s and fade in the next element
});

  <div class='message-block [ js-do-something ]'>
    <p class='greeting'>Hi!</p>
    <p class='message'>I'm Noah</p>
  </div>

var showStuff = function(input) {
    var $input = $(input);
    var fadeTime = 300;
    $input.on('click', function() {
        $input.find('.greeting').animate({
            opacity: 1
        }, {
            duration: fadeTime,
            complete: function() {
                $input.find('.message').animate({
                    opacity: 1
                }, fadeTime);
            }
        });
    });
};

showStuff('.js-do-something');