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

Question

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

重拨 fadeIn 或 fadeOut 在 .animate() 内不工作，但如果它工作警报 ("text")。我正在使用 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之间存在一些差异。区别之一是动画。

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>

Answer 2

您需要包含 jQuery UI 库才能正常工作。但是，您还必须解决其他几个问题。正如所指出的，{background = "red"} 应该替换为正确的对象表示法 {background : "red"}。如果您希望背景在 mouseleave 时变为 return 之前的颜色，您应该重构代码并使用 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 伪 class，效果会更快，看起来会更干净。

希望对您有所帮助！

.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>

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

Why $(this).animate doesn't work

html

css

jquery

jquery-animate