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

Question

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

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

This is the index.php file

$(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 可以不动画化颜色。

For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used

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>