Question

我有以下使用fadeToggle()的JS工作正常，但它会执行display:none因此我总是显示的第3个元素会跳起来，因此想知道是否可以更改{{1 }到 opacity 所以理论上块仍然存在，没有任何动作。

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

Answer 1

你正确设置display:none并且元素空间在元素取代之后消失，而你需要使用带有opacity函数的animate()，就像这样：

JS Fiddle 1

＆＃13;

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;
});

＆＃13;

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

＆＃13;

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

＆＃13;

或者，您可以使用.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上绑定它，但不能同时绑定它们，因为它会对这两个事件做出响应并将其opacity切换得过快以至于淡入淡出效果赢了＃ 39;显而易见。

JS Fiddle 3

Answer 2

AFAIK，这是fadeToggle的行为，你无法做很多事情，但你可以使用更适合你需要的替代方法，例如fadeTo。

fadeTo只会更改元素的不透明度，而切换部分则是您自己必须实现的内容，但它不应该复杂。

Answer 3

使用opacity:0

创建一个CSS类

.hidden {
    opacity: 0;
}

使用jQuery在元素上切换类

$("selector").toggleClass("hidden");

https://jsfiddle.net/582yahvc/

jQuery绑定到元素上的切换不透明度

3 个答案: