JQuery中的fadeIn()函数无法正常工作

时间:2016-05-24 17:24:58

标签: jquery fadein

1.6.2和1.12.2之间的fadeIn()方法是否有变化?

我正在学习JQuery。我使用的这本书已经足够大了,当时的版本是1.6.2,但我使用的是1.12.2。

我试图使用fadeIn()功能。我试图让照片淡入淡出。照片显示但它没有像它应该的那样淡入。在多次查看代码之后,我可以说它与示例代码完全相同,除了JQuery版本。 / p>

有什么想法吗?

<html>

  <head>
    <title>Furry Friends Campaign</title>
    <link rel="stylesheet" type="text/css" href="my_style1.css"> </head>

  <body>
    <div id="clickMe">Show me the furry friend of the day</div>
    <div id="picframe"> <img src="E:/Head First JQuery/ch01/Begin/images/furry_friend.jpg"> </div>
    <script src="e:/scripts/jQuery-1.12.2.min.js"></script>
    <script>
      $(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;
}

1 个答案:

答案 0 :(得分:0)

您是否尝试过jQuery参考API?以下链接可帮助您更好地了解fadeIn()的工作原理。 http://api.jquery.com/fadein/

试试这个 - https://jsfiddle.net/breezy/7dn6tm3h/

JS

 $( document ).ready(function() {
      $('img').fadeIn(1000);
    });

CSS

img {
  display: none;
}