为什么 fadeIn() 不工作？

Question

我的HTML代码是：

<!DOCTYPE html>
<html> 
    <head>
        <title>Furry Friends Campaign</title>
        <link rel="stylesheet" type="text/css" href="styles/my_style.css">
    </head>
    <body>
        <div id="clickMe">Show me the the Furry Friend of the Day</div>
        <div id="picframe">
            <img src="images/furry_friend.jpg" alt="Our Furry Friend">
        </div>
        <script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function()
            {
                $("#clickMe").click(function()
                {
                    $("img").fadeIn(1000);
                    $("#picframe").slideToggle("slow");
                });
            });
        </script>
    </body>
</html>

附带的 CSS 看起来像：

#clickMe {
    background: #D8B36E;
    padding: 20px;
    text-align: center;
    width: 205px;
    display: block;
    border: 2px solid #000;
}

#picframe {
    background: #D8B36E;
    padding: 20px;
    width: 205px;
    display: none;
    border: 2px solid #000;
}

slideToggle 工作得很好，但由于某种原因，图像没有淡入。我尝试将持续时间设置为更长的时间，但结果相同。有人可以指出这段代码有什么问题吗？我使用的是 Chrome.

的最新版本

更新： 我尝试了运行我正在使用的书的示例代码，它使用了 jquery-1.6.2.min.js 并使用了那个版本的 jQuery，代码完美运行。这是 jQuery 方面的一些错误吗？或者是现在做事的新方式？

Answer 1

自 jQuery 1.8 起，fadeIn 最初不再隐藏图像，因此尝试淡入可见或未将 display 设置为 none 的图像不会'不会导致任何结果。

要淡入，先隐藏。最初它没有隐藏，因为 children 不继承 display CSS 属性，并且您仅在 #picframe 上将其设置为 none， img 的 parent。只需在 ready 上添加 $("img").hide();。这将使它起作用。

因为看起来你需要在每次点击时淡入/淡出，你可以执行以下操作而不是 $("img").fadeIn(1000):

if($("img").is(":hidden")) $("img").fadeIn(1000);
                      else $("img").fadeOut(1000);

下面的演示。

#clickMe {
  background: #D8B36E;
  padding: 20px;
  text-align: center;
  width: 205px;
  display: block;
  border: 2px solid #000;
}
#picframe {
  background: #D8B36E;
  padding: 20px;
  width: 205px;
  display: none;
  border: 2px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="clickMe">Show me the the Furry Friend of the Day</div>
<div id="picframe">
  <img src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    //$("img").hide();
    $("#clickMe").click(function() {
      $("img").fadeIn(1000);
      $("#picframe").slideToggle("slow");
    });
  });
</script>

Answer 2

不知何故，img 没有继承 #picframe div 中的 display:none。这是修复：https://jsfiddle.net/69rLha7e/1/

Answer 3

一次播放多个动画时有一个 "timing" 考虑。

在this CodePen中，我对fadeIn、fadeOut和toggleSlide使用了不同的时间。

并且您必须检查显示状态才能决定淡入或淡出。

$(document).ready(function(){

    $("#clickMe").click(function(){   
        console.log( $("img").css("display") ) ;

        if( $("img").css("display")=="inline" ){
            $("img").fadeOut(400);
        }else{
            $("img").fadeIn(800);
        }

        $("#picframe").slideToggle(400);
    });
});

为什么 fadeIn() 不工作？

Why isn't fadeIn() working?

javascript

jquery

fadein