jQuery animate（）控制點擊的不透明度

Question

這就是我想要的。 我想要當您單擊按鈕在300毫秒內從0透明度變為1透明度。 問題是，當我單擊按鈕時，它沒有動畫！ 真令人沮喪。 這是代碼：

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

Answer 1

0和1是數字，而不是字符串。 而且您不是通過執行該語句來調用showStuff() 。 如果要這樣做，則需要通過調用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>

Answer 2

如果您使用的是jQuery，為什么不使用fadeIn（）和delay（）？

這是一個小提琴– https://jsfiddle.net/xge2wnw7/

$("#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
});

Answer 3

如果您只是剛入門，則可能需要考慮使事物保持模塊化以及內容，樣式和功能分開的功能有多大幫助。 在這種情況下，我不會在HTML中放置onClick。

的HTML

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

的JavaScript

您有將這個函數存儲在變量中的正確想法。 如果您在幾個地方需要此功能怎么辦？ 您只需組成一些參數並將其傳遞給函數，然后就可以將每個函數調用定制為不同的元素。 另外-在您的Codepen中-您不需要html中的<body> / <head>等。 它已經包括在內。 您的ID不必過於具體-在大多數情況下，上課會變得更好。 另外-如果您想在視覺上分離專門用於功能的類-您可以在該類前面加上js-甚至將它們放在方括號中以確保確實。 無論如何-這些是我對此主題的看法。

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');

jsFiddle

jQuery animate（）控制點擊的不透明度

問題描述

3 個解決方案

解決方案1
0 已采納 2015-10-14 20:23:54

解決方案2
0 2015-10-14 20:40:21

解決方案3
0 2015-10-14 20:56:27

的HTML

的JavaScript

jQuery animate（）控制點擊的不透明度

問題描述

3 個解決方案

解決方案1 0 已采納 2015-10-14 20:23:54

解決方案2 0 2015-10-14 20:40:21

解決方案3 0 2015-10-14 20:56:27

的HTML

的JavaScript

解決方案1
0 已采納 2015-10-14 20:23:54

解決方案2
0 2015-10-14 20:40:21

解決方案3
0 2015-10-14 20:56:27