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的图像不会导致任何事情。

要淡入，您应该先隐藏它。最初它没有被隐藏，因为孩子不会继承display CSS属性，并且只在none上将其设置为#picframe，即img的父级。只需添加$("img").hide();即可。这将使它发挥作用。

由于每次点击都需要淡入/淡出，因此您可以执行以下操作而不是$("img").fadeIn(1000)：

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

下面的演示。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

Answer 3

有一个＆＃34;时间＆＃34;在玩多个动画时考虑一下。

在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);
    });
});

为什么fnIn（）没有工作？

3 个答案: