Javascript 单击时两个列表项的无限衰减/衰减替换

我有这几乎工作，但不完全。我只想能够在一个按钮上的两个无序列表项之间保持切换，当第二项淡入时，第一项淡出。然后在另一次单击时以相反的方式进行操作。第一次点击它就可以了，第二次也一样，但我不知道接下来该去哪里。第一个li项目只是一个bg图像，单击后将变为一些文本，然后再次单击返回到图像。提前谢谢。T

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

---

也许这可以帮助你：

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>

---

您可以存储其中一个内容部分的状态，并在此基础上切换可见性。例如：

$(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:

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

---

使用

fadeToggle

在一个

click

上同时使用两个元素。当我单击我的按钮时，这一个只会刷新我的页面。内容没有任何更改您是否更改了我示例中的选择器？是的。我看你的密码有点变了。我会试试看。$（'changeToText'）。单击（函数（）{$（'gizBrainButton'）。fadeToggle（1000）。promise（）。完成（函数（）{$（'showGizText'）。fadeToggle（1000）；}）；我不知道click如何重新加载您的页面（如果我们只讨论此代码）。我在JSFIDLE上做了一个例子：非常感谢您的帮助。谢谢，没问题。我为您添加了一个基本的示例，如果您想删除jQuery来为您解决这个问题，可以使用它（这有点像一把大锤）。不要担心，如果你不想，那么它就留在这里，以备将来参考。

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

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

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