Question

当我将鼠标悬停在ID为#work的元素上时，我希望背景动画为不同的颜色。因此这段代码：

$("#work").on('mouseenter', function() {
    $(".wrapper").animate( {"background-color": '#EF6C00'});
  })

当鼠标没有悬停在元素上并离开时，我希望它回到它的原始颜色。因此这段代码：

$("#work").on('mouseleave', function() {
    $(".wrapper").animate( {"background-color": '#395eb0'});
  })

现在我的问题。当我试图告诉jQuery当我点击元素时，它应该保持它动画的颜色。这根本不起作用。这是完整的代码：

  $("#work").on('mouseenter', function() {
    $(".wrapper").animate( {"background-color": '#EF6C00'});
  })

  $("#work").on('mouseleave', function() {
    $(".wrapper").animate( {"background-color": '#395eb0'});
  })

    $("#work").on('click', function() {
    $(".wrapper").css("background-color", '#EF6C00');
  });

Answer 1

首先，您需要一些具有彩色动画的插件。试试jQuery UI或this answer

现在您的代码会发生什么：

你悬停元素。
动画开始。
您点击了元素。
点击事件更改元素的颜色。
动画下一步是使用当前步骤颜色重新绘制元素。
动画继续执行。

所以你需要先停止动画。

＆＃13;

$(document).ready(function() {
  $("#work").on('mouseenter', function() {
    $(".wrapper").stop().animate({
      "background-color": '#ef6C00'
    }, 2000);
  })

  $("#work").on('mouseleave', function() {
    $(".wrapper").stop().animate({
      "background-color": '#395eb0'
    }, 2000);
  })

  $("#work").on('click', function() {
    $(".wrapper").stop().css("background-color", '#ef6C00');
  });
});

＆＃13;

.wrapper {
  width: 150px;
  height: 150px;
  border: 1px solid #ddd;
  background-color: #ef6C00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="wrapper" id="work"></div>

＆＃13;

无法获得jQuery mouseenter，mouseleave并点击工作

1 个答案: