为什么$（this）.animate不起作用

时间：2018-04-13 16:35:21

标签： jquery html css html5 jquery-animate

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

重写fadeIn或fadeOut在.animate()内无法正常工作，但是如果它有效（＆＃34;文字＆＃34;）。我使用Bootstrap 4。

  

这是index.php文件

＆＃13;
＆＃13; 
$(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 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

在这种情况下，出现错误有三个原因。

1）{background = "red"}应为{background : "red"}

2）jquery.js和jquery.slim.js之间存在serval差异。其中一个区别是动画。 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>

答案 1 :(得分：0)

您需要包含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>

相关问题
最新问题