javascript - 下载 jQuery(从其网站)库以离线运行

Question

我想在鼠标进入时让我的图片动画淡入淡出。但是动画不工作

所以我从 jQuery 站点下载了 jQuery.min.js(特别是 jquery-2.1.4.min.js 但我将其重命名为 jquery.min.js)文件并将其链接到我的 html 文件

就像这样:

<script type="text/javascript" src="jquery.min.js"></script>

注意:它不在单独的文件夹中。它们与 html 文件位于同一位置

我还从我的 html 文件链接了我的 jQuery 动画

<script type="text/javascript" src="animations.js"></script>

注意:它不在单独的文件夹中。它们与 html 文件位于同一位置

这是我的 jquery 代码:

$(document).ready(function() {
    $('img.profile-image').mouseenter(function() {
        $(this).fadeIn('slow', 1)
    });
});

这是我的 html 和 css 代码:

<div id="profile_container">
   <section class="profile_pic">
  <img src="profile1.jpg" class="profile-image" style="border-radius: 50px/15px; width:100%; border: 3px solid white; display: none;  ">
    </section>
</div>

我认为我的代码没有任何错误。尽管如此，当我将光标悬停在它上面或鼠标进入它时，它仍然不起作用。它不会淡入。

Answer 1

您可以在 section 而不是 img 上设置事件，这样在 DOM 中实际上有一些东西可以鼠标悬停。

在我的代码片段中，我还将 section 元素设置为图像的尺寸，并且我使用 .hover() 而不是 .mouseenter() 这样我就可以很容易让它在 .mouseleave() 上淡出。

$(document).ready(function() {
  $('.profile_pic').hover(
    function() {
      $('img.profile-image').fadeIn('slow')
    },
    function() {
      $('img.profile-image').fadeOut('slow')
    });
});

.profile-image {
  width: 100%;
  display: none;
}

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<div id="profile_container">
  <section class="profile_pic" style="height:131px;width:506px;">
    <img src="http://i.imgur.com/pszAeGh.png" class="profile-image">
  </section>
</div>