Why $(this).animate doesn't work

Question

I have been trying to make animations in jQuery with .animate, for all the elements that have the class .boton1. When its hover event occurs, its background should change to red, but it does not work with fadeIn or fadeOut.

Redial that fadeIn or fadeOut do not work inside .animate(), but if it works alert ("text"). I'm using 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>

`{background = "red"}` should be `{background : "red"}`. – Hikarunomemory Apr 13 '18 at 16:40 — Hikarunomemory, Apr 13 '18 at 16:40

Hikarunomemory · Answer 1 · 2018-04-13T17:26:37.200

There are three reasons occurs the error in this case.

1) {background = "red"} should be {background : "red"}

2) There are serval differences between jquery.js and jquery.slim.js. One of the difference is animate. What are the differences between normal and slim package of jquery?

3) jQuery can NOT animate colours.

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>

But, there's no need to do that with animate() since there's a better choice : 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>

i mean... the script tag is directly in the question, it's not slim version. — Kevin B, Apr 13 '18 at 20:08

score 0 · Accepted Answer · answered Apr 13 '18 at 20:42

You do need to include the jQuery UI library for this to work. However, there are a couple other issues you have to fix as well. As was pointed out, {background = "red"} should be replaced with correct object notation {background : "red"}. If you want the background to return to its previous color on mouseleave, you should refactor the code and use the mouseenter and mouseleave events:

$(".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>

.

With that said, the effect will be much faster and will look cleaner if you simply use the CSS :hover pseudo-class.

Hope this helps!

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

Why $(this).animate doesn't work

2 Answers2