我有这个几乎工作但不完全。我只是希望能够在按钮上切换两个无序列表项之间,当第二个项目淡入时,将第一个项目淡出。然后在另一个点击时以相反的方式执行。在第一次点击它,第二次点击,但我不知道在那之后去哪里。第一个li项目只是一个bg图像,在点击时会更改为某些文本,然后在另一次点击时返回到图像。提前致谢。 Ť
$(document).ready(function() {
$('#myButton').click( function() {
$('.contentOne').fadeOut( 'slow', function() {
$('.contentTwo').fadeIn('slow', function() {
$('#myButton').click(function() {
$('.contentTwo').fadeOut( 'slow', function() {
$('.contentOne').fadeIn('slow');
});
});
});
});
return false;
});
});
答案 0 :(得分:0)
也许这可以帮到你:
html
<button id="changeToText">
Change
</button>
<div class="gizBrainButton">
first class
</div>
<div class="gizBrainButton">
first class
</div>
<div class="showGizText" style="display:none;">
Second class
</div>
<div class="showGizText" style="display:none;">
Second class
</div>
js
$('#changeToText').click(function() {
if ($('.gizBrainButton').is(':visible')) {
$('.gizBrainButton').fadeToggle(1000).promise().done(function() {
$('.showGizText').fadeToggle(1000);
});
} else if($('.showGizText').is(':visible')) {
$('.showGizText').fadeToggle(1000).promise().done(function() {
$('.gizBrainButton').fadeToggle(1000);
});
}
});
答案 1 :(得分:0)
您可以存储其中一个内容部分的状态,并根据该部分切换可见性。例如:
$(document).ready(function () {
/** @var boolean */
var isContentOneVisible = true;
/** @var string */
var fadeSpeed = 'slow';
$('#myButton').click(function () {
if (isContentOneVisible) {
$('.contentOne').fadeOut(fadeSpeed);
$('.contentTwo').fadeIn(fadeSpeed);
isContentOneVisible = false;
return;
}
$('.contentOne').fadeIn(fadeSpeed);
$('.contentTwo').fadeOut(fadeSpeed);
isContentOneVisible = true;
});
});
jQuery也提供fadeToggle
。它可以轻松实现您的用例,因为它可以跟踪状态本身。
我更喜欢轻巧的香草解决方案。例如,您可以在包含要显示和隐藏的元素的元素上切换类名。使用CSS来切换它们的可见性,可能使用转换来模仿jQuery实现的效果。
下面的一些示例代码,以帮助您前进。
HTML:
<button class='contentToggler'>Show secondary content</button>
<ul class='toggleableContent'>
<li class='toggleableContent__item toggleableContent__item--first'><!-- content --></li>
<li class='toggleableContent__item toggleableContent__item--second'><!-- content --></li>
</ul>
CSS:
.toggleableContent__item {
opacity: 1;
transition: opacity .5s ease;
}
.toggleableContent--isToggled .toggleableContent__item--first,
.toggleableContent__item--second {
opacity: 0;
}
.toggleableContent--isToggled .toggleableContent__item--second {
opacity: 1;
}
使用Javascript:
document.addEventListener('DOMContentLoaded', function (event) {
var toggler = document.querySelector('.contentToggler');
var toggleableContent = document.querySelector('.toggleableContent');
if (!toggler || !toggleableContent) {
return;
}
toggler.addEventListener('click', function (event) {
toggleableContent.classList.toggle('toggleableContent--isToggled');
});
});