为什么 $(this).animate 不起作用

Question

我一直在尝试使用.animate 在jQuery 中为所有具有.boton1 类的元素制作动画。当它的悬停事件发生时，它的背景应该变为红色，但它不适用于fadeIn 或fadeOut。

重拨fadeIn 或fadeOut 在.animate() 内不起作用，但如果它起作用，则发出警报（“文本”）。我正在使用Bootstrap 4。

这是 index.php 文件

$(document).ready(function() {
  $(".boton1").hover(function() {
    $(this).animate({
      background = "red"
    }, 500);
  });
}); > And these are my styles global.css * {
    text - decoration: none;list - style: none;
  }.cabezera - general {
    display: block;width: 100 % ;height: auto;padding: 5 px;
  }.logo {
    color: white;font - weight: bold;display: inline - block;
  }.navegacion {
    display: inline - block;border: 1 px solid red;text - align: center;
  }.opcion1 {
    display: inline - block;margin: 5 px;
  }.boton1 {
    display: inline - block;padding: 5 px 15 px;border: none;background: none;background: white;color: #1B2C3F; cursor:pointer; cursor: hand }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />



<header class="cabezera-general" id="cabezera-general-pagina">
  <div class="container">
    <section class="row">
      <h1 class="col-xs-2 col-sm-2 col-md-2 col-lg-2 logo">Flush</h1>
      <nav class="col-xs-8 col-sm-8 col-md-8 col-lg-8 navegacion">
        <li class="opcion1 boton1">Inicio</li>
        <li class="opcion1 boton1">Ordenadores</li>
        <li class="opcion1 boton1">Muebleria</li>
        <li class="opcion1 boton1">Dispositivos moviles</li>
        <li class="opcion1 boton1">Monitores</li>
      </nav>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas pariatur ad inventore unde aliquam beatae alias iure quasi omnis neque. Voluptates sequi ducimus nesciunt recusandae cum adipisci necessitatibus fugit doloribus.</div>
    </section>
  </div>
</header>

Answer 1

在这种情况下发生错误的原因有三个。

1) {background = "red"} 应该是 {background : "red"}

2) jquery.js 和 jquery.slim.js 之间存在一些差异。区别之一是动画。 What are the differences between normal and slim package of jquery?

3) jQuery 可以不为颜色设置动画。

例如，宽度、高度或左侧可以设置动画，但 background-color 不能，除非使用了 jQuery.Color 插件

From jQuery Documentation

$(document).ready(function() {

  $(".boton1").hover(function() {
    $(this).animate({
      fontSize: "30"
    }, 500);
  });

});

* {
  text-decoration: none;
  list-style: none;
}

.cabezera-general {
  display: block;
  width: 100%;
  height: auto;
  padding: 5px;
}

.logo {
  color: white;
  font-weight: bold;
  display: inline-block;
}

.navegacion {
  display: inline-block;
  border: 1px solid red;
  text-align: center;
}

.opcion1 {
  display: inline-block;
  margin: 5px;
}

.boton1 {
  display: inline-block;
  padding: 5px 15px;
  border: none;
  background: none;
  background: white;
  color: #1B2C3F;
  cursor: pointer;
  cursor: hand
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Bootstrap -->

<!-- Jquery    -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Cabezera Principal -->
<header class="cabezera-general" id="cabezera-general-pagina">
  <div class="container">
    <section class="row">
      <h1 class="col-xs-2 col-sm-2 col-md-2 col-lg-2 logo">Flush</h1>
      <nav class="col-xs-8 col-sm-8 col-md-8 col-lg-8 navegacion">
        <li class="opcion1 boton1">Inicio</li>
        <li class="opcion1 boton1">Ordenadores</li>
        <li class="opcion1 boton1">Muebleria</li>
        <li class="opcion1 boton1">Dispositivos moviles</li>
        <li class="opcion1 boton1">Monitores</li>
      </nav>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas pariatur ad inventore unde aliquam beatae alias iure quasi omnis neque. Voluptates sequi ducimus nesciunt recusandae cum adipisci necessitatibus fugit doloribus.</div>
    </section>
  </div>
</header>
<!-- Cabezera Principal -->
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

但是，animate() 没有必要这样做，因为有更好的选择：CSS。

* {
  text-decoration: none;
  list-style: none;
}

.cabezera-general {
  display: block;
  width: 100%;
  height: auto;
  padding: 5px;
}

.logo {
  color: white;
  font-weight: bold;
  display: inline-block;
}

.navegacion {
  display: inline-block;
  border: 1px solid red;
  text-align: center;
}

.opcion1 {
  display: inline-block;
  margin: 5px;
}

.boton1 {
  display: inline-block;
  padding: 5px 15px;
  border: none;
  background: none;
  background: white;
  color: #1B2C3F;
  cursor: pointer;
  cursor: hand
}

.boton1:hover{
  transition: background 0.5s;
  background: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Bootstrap -->

<!-- Jquery    -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Cabezera Principal -->
<header class="cabezera-general" id="cabezera-general-pagina">
  <div class="container">
    <section class="row">
      <h1 class="col-xs-2 col-sm-2 col-md-2 col-lg-2 logo">Flush</h1>
      <nav class="col-xs-8 col-sm-8 col-md-8 col-lg-8 navegacion">
        <li class="opcion1 boton1">Inicio</li>
        <li class="opcion1 boton1">Ordenadores</li>
        <li class="opcion1 boton1">Muebleria</li>
        <li class="opcion1 boton1">Dispositivos moviles</li>
        <li class="opcion1 boton1">Monitores</li>
      </nav>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas pariatur ad inventore unde aliquam beatae alias iure quasi omnis neque. Voluptates sequi ducimus nesciunt recusandae cum adipisci necessitatibus fugit doloribus.</div>
    </section>
  </div>
</header>
<!-- Cabezera Principal -->
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

Answer 2

您确实需要包含jQuery UI 库才能使其工作。但是，您还必须解决其他几个问题。正如所指出的，{background = "red"} 应替换为正确的对象表示法{background : "red"}。如果您希望背景在 mouseleave 上返回之前的颜色，您应该重构代码并使用 mouseenter 和 mouseleave 事件：

$(".boton1").on('mouseenter', function() {
  $(this).animate({
    backgroundColor: 'red'
  }, 500);
}).on('mouseleave', function() {
  $(this).animate({
    backgroundColor: 'white'
  }, 500);;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<header class="cabezera-general" id="cabezera-general-pagina">
  <div class="container">
    <section class="row">
      <h1 class="col-xs-2 col-sm-2 col-md-2 col-lg-2 logo">Flush</h1>
      <nav class="col-xs-8 col-sm-8 col-md-8 col-lg-8 navegacion">
        <li class="opcion1 boton1">Inicio</li>
        <li class="opcion1 boton1">Ordenadores</li>
        <li class="opcion1 boton1">Muebleria</li>
        <li class="opcion1 boton1">Dispositivos moviles</li>
        <li class="opcion1 boton1">Monitores</li>
      </nav>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas pariatur ad inventore unde aliquam beatae alias iure quasi omnis neque. Voluptates sequi ducimus nesciunt recusandae cum adipisci necessitatibus fugit doloribus.</div>
    </section>
  </div>
</header>

.

话虽如此，如果您只使用CSS :hover 伪类，效果会更快并且看起来更干净。

希望这会有所帮助！

.boton1:hover {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<header class="cabezera-general" id="cabezera-general-pagina">
  <div class="container">
    <section class="row">
      <h1 class="col-xs-2 col-sm-2 col-md-2 col-lg-2 logo">Flush</h1>
      <nav class="col-xs-8 col-sm-8 col-md-8 col-lg-8 navegacion">
        <li class="opcion1 boton1">Inicio</li>
        <li class="opcion1 boton1">Ordenadores</li>
        <li class="opcion1 boton1">Muebleria</li>
        <li class="opcion1 boton1">Dispositivos moviles</li>
        <li class="opcion1 boton1">Monitores</li>
      </nav>
      <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas pariatur ad inventore unde aliquam beatae alias iure quasi omnis neque. Voluptates sequi ducimus nesciunt recusandae cum adipisci necessitatibus fugit doloribus.</div>
    </section>
  </div>
</header>