简单的fadeIn jQuery

时间:2018-12-05 09:20:19

标签: jquery fadein

我正在尝试使用jQuery创建一个淡入淡出效果,但似乎不起作用。

$("h1").append("<p>This is new.</p>");

// With the element initially hidden, we can show it slowly:
$("#clickme").click(function() {
  $("#square").fadeIn("slow", function() {
    // Animation complete
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="clickme">
  Click me
</div>
<img id="square" src="https://cdn.glitch.com/4963558f-bbaf-419b-9695-abdd14691841%2Fsquare.png?1544000277571" alt="" width="100" height="123">

我是从http://api.jquery.com/fadein/那里得到的(我将书本图像替换为方形图像,因为我没有书本图像)

我正在启动JavaScript和HTML,但我真的不理解其他fadingIn jQuery问题的答案,这就是为什么我问自己的问题。

3 个答案:

答案 0 :(得分:2)

您应该从display:none开始#square,然后才能fadeIn

$("h1").append("<p>This is new.</p>");
    
// With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#square" ).fadeIn( "slow", function() {
    // Animation complete
  });
});
#square {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="clickme">
  Click me
</div>
<img id="square" src="https://cdn.glitch.com/4963558f-bbaf-419b-9695-abdd14691841%2Fsquare.png?1544000277571" alt="" width="100" height="123">

答案 1 :(得分:1)

如果正方形已经褪色,您怎么fadeIn

  

当正方形不可见时使用FadeIn,当正方形可见时使用FadeOut。

在此示例中,正方形为display:none,而当“单击我” 时,正方形为 fadeIn

$("h1").append("<p>This is new.</p>");

// With the element initially hidden, we can show it slowly:
$("#clickme").click(function() {
  $("#square").fadeIn("slow", function() {
    // Animation complete
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="clickme">
  Click me
</div>
<img id="square" style="display:none" src="https://cdn.glitch.com/4963558f-bbaf-419b-9695-abdd14691841%2Fsquare.png?1544000277571" alt="" width="100" height="123">

答案 2 :(得分:1)

fadeIn只有元素是不可见的。看看下面的脚本

$("h1").append("<p>This is new.</p>");

// With the element initially hidden, we can show it slowly:
$("#clickme").click(function() {
  $element = $("#square");
  if ($element.is(':visible')) {
    // Hide if already visible.
    $element.fadeOut("slow", function() {});
  } else {
    // Show if not yet visible.
    $element.fadeIn("slow", function() {});
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="clickme">
  Click me
</div>
<div id="square">
  <img src="https://cdn.glitch.com/4963558f-bbaf-419b-9695-abdd14691841%2Fsquare.png?1544000277571" alt="" width="100" height="123">
</div>