Javascript 为什么不是'；t fadeIn（）工作吗？_Javascript_Jquery_Fadein

Javascript 为什么不是'；t fadeIn（）工作吗？

javascript jquery

Javascript 为什么不是'；t fadeIn（）工作吗？,javascript,jquery,fadein,Javascript,Jquery,Fadein,我的HTML代码是： <!DOCTYPE html> <html> <head> <title>Furry Friends Campaign</title> <link rel="stylesheet" type="text/css" href="styles/my_style.css"> </head> <body> <

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

滑动切换效果很好，但由于某些原因，图像不会淡入。我曾尝试将持续时间设置为更长的时间段，但结果相同。有人能指出这个代码有什么问题吗？我正在使用最新版本的Chrome

更新：我试着运行我正在使用的那本书的示例代码，它使用了

jquery-1.6.2.min.js

，使用该版本的jquery，代码运行得非常完美。这是jQuery方面的错误吗？还是现在事情将以新的方式进行

自jQuery 1.8以来，fadeIn不再最初隐藏图像，因此尝试在可见或没有

display

设置为

none

的图像中淡入淡出不会导致任何结果

要淡入，应先将其隐藏。最初它并不隐藏，因为子对象不继承

display

CSS属性，并且您仅在img的父对象

#picframe

上将其设置为

none

。只需添加

$（“img”）.hide（）打开就绪。这将使它起作用
由于每次单击都需要淡入淡出，因此可以执行以下操作，而不是执行$（“img”）。fadeIn（1000）
：
下面是演示

#单击我{
背景#D8B36E；
填充：20px；
文本对齐：居中；
宽度：205px；
显示：块；
边框：2倍实心#000；
}
#画框{
背景#D8B36E；
填充：20px；
宽度：205px；
显示：无；
边框：2倍实心#000；
}

给我看看今天的毛茸茸的朋友
$（文档）.ready（函数（）{
//$（“img”）.hide（）；
$（“#单击我”）。单击（函数（）{
$（“img”）。法代因（1000）；
$（“#picframe”）。滑动切换（“慢速”）；
});
});
自jQuery 1.8以来，fadeIn最初不再隐藏图像，因此尝试淡入可见的图像或将显示设置为无的图像不会导致任何结果
要淡入，应先将其隐藏。最初它并不隐藏，因为子对象不继承display
CSS属性，并且您仅在img的父对象#picframe
上将其设置为none
。只需添加$（“img”）.hide（）打开就绪。这将使它起作用
由于每次单击都需要淡入淡出，因此可以执行以下操作，而不是执行$（“img”）。fadeIn（1000）
：
下面是演示

#单击我{
背景#D8B36E；
填充：20px；
文本对齐：居中；
宽度：205px；
显示：块；
边框：2倍实心#000；
}
#画框{
背景#D8B36E；
填充：20px；
宽度：205px；
显示：无；
边框：2倍实心#000；
}

给我看看今天的毛茸茸的朋友
$（文档）.ready（函数（）{
//$（“img”）.hide（）；
$（“#单击我”）。单击（函数（）{
$（“img”）。法代因（1000）；
$（“#picframe”）。滑动切换（“慢速”）；
});
});
不知何故，img
没有继承#picframe
div中的display:none
。这里有一个修正：
不知何故，img
没有继承#picframe
div中的display:none
。这里有一个修正：
在一次播放多个动画时有一个“计时”考虑
在中，我对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
、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);
    });
});

请尝试为img元素设置一个id，并改为在该id上调用fadeIn。@TheValyLeanGroup尝试这样做。无更改。图像显示是否只是不淡入，或者根本没有图像？请尝试为img元素设置一个id，并在id上调用fadeIn。@ValyLean组尝试了这样做。没有变化。图像显示是否只是没有淡入，或者根本没有图像？显示已设置为显示：无；查看CSS。这应该是有效的。@不，您设置了display:none of#picframe，not of img。我试着运行我正在使用的书的示例代码，它使用了jquery-1.6.2.min.js
，使用该版本的jquery，代码运行得非常好。这是jQuery方面的错误吗？还是现在就采用新的方式来完成任务？@有些人说得很对，它与旧jQuery一起工作。我甚至不知道，但似乎知道。查看编辑。显示已设置为显示：无；查看CSS。这应该是有效的。@不，您设置了display:none of#picframe，not of img。我试着运行我正在使用的书的示例代码，它使用了jquery-1.6.2.min.js，使用该版本的jquery，代码运行得非常好。这是jQuery方面的错误吗？还是现在就采用新的方式来完成任务？@有些人说得很对，它与旧jQuery一起工作。我甚至不知道，但似乎知道。请参见编辑。
$(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);
    });
});