單擊時無限地淡出/淡入替換兩個列表項

Question

我幾乎可以正常工作了，但還不夠。 我只希望能夠在按鈕單擊時在兩個無序列表項之間進行切換，使第二個項淡入淡出，使第一個項淡出。然后在另一次單擊時以相反的方式進行操作。 第一次單擊時，它會起作用，第二次單擊時，它會起作用，但是我不確定之后該去哪里。 第一個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;
    });
});

Answer 1

也許這可以幫助您：

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

Answer 2

您可以存儲內容部分之一的狀態，並根據此狀態切換可見性。 例如：

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