javascript - jQuery 绑定(bind)以切换元素的不透明度

Question

我有以下使用 fadeToggle() 的 JS，它工作正常但是它执行 display:none 所以我总是显示的第三个元素跳起来所以想知道是否可以将 opacity 更改为 0 因此理论上该 block 仍然存在并且没有任何移动。

JS

$('.ty-banner__image-item.gt-banner').bind('touchstart touchend', function(e) {
    $(this).find('div.image .banner-overlay').fadeToggle('fade');
    $(this).find('.content h2, .content p:first-child, .content p:eq(1)').fadeToggle();
});

我可以通过切换将 opacity 设置为 0 吗？

更新为使用切换类来添加类淡入淡出，这只会改变 opacity: 0 但需要以某种方式淡化它。

// mobile touch rubbish
    $('.ty-banner__image-item.gt-banner').bind('touchstart touchend', function(e) {
        $(this).find('div.image .banner-overlay').toggleClass('fade');
        $(this).find('.content h2, .content p:not(".button")').toggleClass('fade');
    });

Answer 1

你是对的，它设置了 display:none 并且元素空间消失了，使元素在它取代它之后，而不是你需要使用 opacity 和 animate() 函数，就像这样:

JS Fiddle 1

var toggleFlag = true;

$('#btn').on('click', function() {
  
  // if the toggle flag is true, we set the opacity to 0, 
  // else we set it to 1, and animate the opacity property
  var op = (toggleFlag) ? 0 : 1;
  $('#second-div').stop().animate({'opacity': op}, 500);
  
  // finally we switch the toggle flag value to keep in control  
  toggleFlag = !toggleFlag;
});

.divs {
  display: block;
  width: 150px;
  height: 100px;
  margin-bottom: 5px;
  background-color: orange;
}
#second-div {
  background-color: tomato;
}
#third-div {
  background-color: skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="first-div" class="divs"></div>
<div id="second-div" class="divs"></div>
<div id="third-div" class="divs"></div>
<button id="btn">animate</button>

---

或者，您可以像这样使用带有 CSS 过渡的 .css() 函数:

JS Fiddle 2

var toggleFlag = true;

$('#btn').on('click', function() {
  var op = (toggleFlag) ? 0 : 1;
  $('#second-div').css({'opacity': op, 'transition': 'opacity 0.5s'});
  toggleFlag = !toggleFlag;
});

---

更新:

您需要在 touchstart 或 touchend 上绑定(bind)它，但不能同时绑定(bind)这两个事件，因为它会响应这两个事件并切换其 opacity淡入淡出效果不会很明显。

JS Fiddle 3