Question

我使用的是在javascript fiddle project中找到的代码，该代码根据查看器使用的页内导航来淡入和淡出各种#divID。

我遇到的问题是每个按钮不一致地淡入/淡出内容。 function divideToSmallerTasks(arr,arr2){ let arrLength = arr.length; if(arr === undefined || arrLength == 0){ return []; }else if(arrLength > 100) { let result = divideToSmallerTasks(arr.slice(100,arrLength),arr2); result.push(function () { return getRelatedGames(arr,arr2); }); return result; }else{ return [function () { return getRelatedGames(arr,arr2); }] ;}会平滑地淡化旧内容，并平滑地淡入新内容，这正是我所希望的。按钮2和4将硬删除旧内容并淡入新内容。按钮3将淡出旧内容，而btn-one将淡出新内容。

我希望他们的行为都一样。如果可能的话，我还希望能够控制div使用的每个动画的类型和持续时间。

我已经尝试过将提琴代码直接复制/粘贴到我的项目中，并且它已经与两个div一起使用了。也许问题出在创建额外的div？但这引起了进一步的问题，因为在小提琴本身中添加更多的hard-cut就可以了。

div

我非常愿意接受以下两种结果之一：

一种使现有代码正常工作的解决方案。
一种全新的代码解决方案，可以提供更好的结果。

感谢您能提供的任何帮助。谢谢。

Answer 1

如果您想要更多控制，请尝试使用CSS过渡。您可以通过设置如下类来模仿fadeIn/Out()功能：

.fade {
  opacity: 1;
  transition: .3s;
}
.fade-out {
  opacity: 0;
}
.hidden {
  display: none;
}

然后使用.toggle-btn类初始化所有按钮，并使用.fade类初始化div，除要显示的按钮外，除.fade-out和{{ 1}}类（这将使那些隐藏起来）。然后将事件监听器（仅一个监听器附加到文档，每个按钮不需要单独的监听器）

.hidden

我从未在JQuery中使用const toggleBtns = {one: 'splash', two: 'reviews', three: 'aboutUs', four: 'even'} document.addEventListener('click', e => { // this line cancels the event if it's not a button we want if (!e.target.classList.contains('toggle-btn')) return; // grab the element(s) we want to hide const toFade = $('.fade:not(.fade-out)'); // add an event listener for the CSS transition that removes after firing toFade.one('transitionend', function(tansitionEvent) { toFade.addClass('hidden') }); // apply the class which will start the transition toFade.addClass('fade-out'); // remove the invisibility classes from your target element, starting that transition $(`#${toggleBtns[e.target.id.split('-')[1]]}`).removeClass('fade-out hidden'); }，但我认为它可以工作。看起来您希望按钮只显示一件事，而隐藏其他所有东西，因此我将关联的div ID放在一个对象中。然后，我用transitionend抓住了它。您为按钮ID保留了toggleBtns[e.target.id.split('-')[1]]的模式，所以我使用btn-number来获取数字，然后将其结果作为键传递给split()对象。

如何修复在我的页面上淡入/淡出部分的不一致的Javascript代码

1 个答案: