Question

我正在尝试获取jQuery addClass＆amp; removeClass转换为具有持续时间（即，当悬停在div上时，而不是高度立即100％，转换大约需要0.5秒）。蓝色div的高度延伸到父div的高度，文本在中央对齐。

演示问题：有一个奇怪的问题构建演示 - jQuery功能不起作用，但在我的实际网站上。不知道为什么会这样，但说它找不到变量'hoverAwayFromWindows'或'hoverOverWindows' - 但这没有意义，因为它们是函数，而不是变量。

转换持续时间问题：一旦父div被盘旋，子div就立即应用了“hover-over-windows-style”类，但我希望这需要时间。通过CSS设置到子级或父级的转换持续时间失败。我也试过改变jQuery：

$（div）.removeClass（＆＃39; hover-over-windows-style'，500）;

$（div）.removeClass（＆＃39; hover-over-windows-style'，500ms） ; $（div）.addClass（＆＃39; hover-over-windows-style＆＃39;）。animate（transition-duration：0.5s，500）;

$（div）.animate（＆＃39; hover-over-windows-style＆＃39;，500）;

有人可以帮我解释一下我在哪里出错吗？

＆＃13;

function hoverOverWindows(div) {
  $(div).addClass('hover-over-windows-style');
};

function hoverAwayFromWindows(div) {
  $(div).removeClass('hover-over-windows-style');
};

＆＃13;

.home-match-type {
    width: 47%;
    height: 300px;
    margin-top: 50px;
    float: left;
    position: relative;
    overflow: hidden;
}

.home-match-type-left { margin-right: 3% }

.img-text-container {
    width: auto;
    height: auto;
    bottom: 0;
    position: absolute;
    padding: 15px;
    background: rgba(60, 122, 173, 0.95);
}

.img-text-container-type-2 { background: rgba(60, 122, 173, 0.95) }

h3.img-text.img-header { float: left }

h3.img-text.img-header.be-central { float: none }

.img-text {
    text-align: left;
    margin: 0;
    display: inline-block;
}


.img-header {
    padding-bottom: 5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(213, 213, 213, 0.3);
}

h3.home-featured-windows, h3.home-featured-windows a, h2.match-type-windows, h2.match-type-windows a, .match-contents a, h2.img-header-left a, h2.product-title a, .home a {
    font-weight: 300;
    color: #333;
}

h3.img-text.img-header.be-central { float: none }

.windows-type-2 { color: #333 }


h3.windows-type-2 a {
    font-weight: 300;
    color: #333;
    float: right;
}

.hover-over-windows-style {
    height: 100%; /* Could set to 300px */
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.blitz-bg {
    background:red;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="assets/css/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<article class="home-match-type home-match-type-left blitz-bg" onmouseover="hoverOverWindows(this.children)" onmouseout="hoverAwayFromWindows(this.children)">
  <div class="img-text-container img-text-container-type-2">
    <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Header 3</a></h3>
    <p class="img-text text-align-centre windows-type-2">Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;..</p>
  </div>
</article>

＆＃13;

Answer 1

您需要mouseenter，mouseleave，从height删除.hover-over-windows-style，因为它将由.animate()设置并删除.animate() callback中的课程

＆＃13;

function hoverOverWindows(div) {
  $(div).addClass('hover-over-windows-style');
  $(div).animate({
    height: "100%"
  }, 500);
}

function hoverAwayFromWindows(div) {
  $(div).animate({
    height: "40%"
  }, 500, function() {
    $(div).removeClass('hover-over-windows-style');
    $(div).css('height', 'auto')
  });
}

＆＃13;

.home-match-type {
  width: 47%;
  height: 300px;
  margin-top: 50px;
  float: left;
  position: relative;
  overflow: hidden;
}

.home-match-type-left {
  margin-right: 3%
}

.img-text-container {
  width: auto;
  height: auto;
  bottom: 0;
  position: absolute;
  padding: 15px;
  background: rgba(60, 122, 173, 0.95);
}

.img-text-container-type-2 {
  background: rgba(60, 122, 173, 0.95)
}

h3.img-text.img-header {
  float: left
}

h3.img-text.img-header.be-central {
  float: none
}

.img-text {
  text-align: left;
  margin: 0;
  display: inline-block;
}

.img-header {
  padding-bottom: 5px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(213, 213, 213, 0.3);
}

h3.home-featured-windows,
h3.home-featured-windows a,
h2.match-type-windows,
h2.match-type-windows a,
.match-contents a,
h2.img-header-left a,
h2.product-title a,
.home a {
  font-weight: 300;
  color: #333;
}

h3.img-text.img-header.be-central {
  float: none
}

.windows-type-2 {
  color: #333
}

h3.windows-type-2 a {
  font-weight: 300;
  color: #333;
  float: right;
}

.hover-over-windows-style {
  /*height: 100%;*/
  /* Could set to 300px */
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  ;
}

.blitz-bg {
  background: red;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<article class="home-match-type home-match-type-left blitz-bg" onmouseenter="hoverOverWindows(this.children)" onmouseleave="hoverAwayFromWindows(this.children)">
  <div class="img-text-container img-text-container-type-2">
    <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Header 3</a></h3>
    <p class="img-text text-align-centre windows-type-2">Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;..</p>
  </div>
</article>

<article class="home-match-type home-match-type-left blitz-bg" onmouseenter="hoverOverWindows(this.children)" onmouseleave="hoverAwayFromWindows(this.children)">
  <div class="img-text-container img-text-container-type-2">
    <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Header 3</a></h3>
    <p class="img-text text-align-centre windows-type-2">Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;..</p>
  </div>
</article>

＆＃13;

Answer 2

您无法使用“效果”更改元素的类。无论是否具有该类，都没有。

但你可以用CSS过渡做动画：

$(function() {
  $('.btn-set').click(function(e) {
    e.preventDefault();
    $('.box').addClass('set');
  });
  $('.btn-rm').click(function(e) {
    e.preventDefault();
    $('.box').removeClass('set');
  });
});

.box {
  width: 50px;
  height: 50px;
  margin-top: 25px;
  background-color: blue;
  transition: all 0.5s ease; /* <-- look here */
}
.box.set {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-set">set color</button>
<button class="btn-rm">remove color</button>
<div class="box"></div>

或者使用jQuery动画，但你还需要jQuery UI：

$(function() {
  $('.btn-set').click(function(e) {
    e.preventDefault();
    $('.box').animate({
      backgroundColor: "red" // <-- look here
    }, 500);
  });
  $('.btn-rm').click(function(e) {
    e.preventDefault();
    $('.box').animate({
      backgroundColor: "blue" // <-- look here
    }, 500);
  });
});

.box {
  width: 50px;
  height: 50px;
  margin-top: 25px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button class="btn-set">set color</button>
<button class="btn-rm">remove color</button>
<div class="box"></div>

使用jQuery addClass＆amp;的转换持续时间removeClass方法

2 个答案: