在 `fadeOut` 完成后出现的问题：`fadeIn` 闪烁选项卡元素。

huangapple
go评论104阅读模式
英文:

Issue on fadeOut complete fadeIn blinking tabs elements

问题

在 fadeOut 完成后，我注意到您对相关的div执行了fadeIn操作。这个div会出现闪烁，而不是第一次。我尝试过更改时间或者使用 'fast'、'slow' 过渡效果，但对我来说都没有起作用。

请提供以最小代码逻辑实现此类效果的最佳方法。

  1. $(document).on("click", ".action a", function (event) {
  2.     let dataSlide = $(this).attr("data-slide");
  3.     $(".slider .slide .slides").fadeOut(0, function () {
  4.         $(".data-slide-" + dataSlide).fadeIn();
  5.     });
  6. });
  1. .slides {
  2.     display: none;
  3. }
  4. .data-slide-1{
  5.     display: block;
  6. }
  7. a{
  8.   background:#ccc;
  9.   padding:4px 6px;
  10. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <div class="action">
  3.     <a data-slide="1">1</a>
  4.     <a data-slide="2">2</a>
  5.     <a data-slide="3">3</a>
  6. </div>
  7. <div class="slider">
  8.     <div class="slide">
  9.         <div class="slides data-slide-1">
  10.             <h1>Slide 1</h1>
  11.         </div>
  12.         <div class="slides data-slide-2">
  13.             <h1>Slide 2</h1>
  14.         </div>
  15.         <div class="slides data-slide-3">
  16.             <h1>Slide 3</h1>
  17.         </div>
  18.     </div>
  19. </div>
英文:

Run below code snippet, you will notice the on fadeOut complete I have fadeIn the relative div. The div is blinking other than first I have tried to change the timings or 'fast', 'slow' the transitions also. Not worked for me.

Please provide best fit to do this kind in minimal code logic.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).on(&quot;click&quot;, &quot;.action a&quot;, function (event) {
  2.     let dataSlide = $(this).attr(&quot;data-slide&quot;);
  3.     $(&quot;.slider .slide .slides&quot;).fadeOut(0, function () {
  4.         $(&quot;.data-slide-&quot; + dataSlide).fadeIn();
  5.     });
  6. });

<!-- language: lang-css -->

  1. .slides {
  2.     display: none;
  3. }
  4. .data-slide-1{
  5.     display: block;
  6. }
  7. a{
  8.   background:#ccc;
  9.   padding:4px 6px;
  10. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;div class=&quot;action&quot;&gt;
  3.     &lt;a data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
  4.     &lt;a data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
  5.     &lt;a data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
  6. &lt;/div&gt;
  7. &lt;div class=&quot;slider&quot;&gt;
  8.     &lt;div class=&quot;slide&quot;&gt;
  9.         &lt;div class=&quot;slides data-slide-1&quot;&gt;
  10.             &lt;h1&gt;Slide 1&lt;/h1&gt;
  11.         &lt;/div&gt;
  12.         &lt;div class=&quot;slides data-slide-2&quot;&gt;
  13.             &lt;h1&gt;Slide 2&lt;/h1&gt;
  14.         &lt;/div&gt;
  15.         &lt;div class=&quot;slides data-slide-3&quot;&gt;
  16.             &lt;h1&gt;Slide 3&lt;/h1&gt;
  17.         &lt;/div&gt;
  18.     &lt;/div&gt;
  19. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

代码部分不需要翻译。

英文:

The issue is described here:

> http://api.jquery.com/fadeout/
>
> complete<br/>
> A function to call once the animation is complete, called once per matched element.

Because your .fadeOut is called on all 3 elements, each gets its own callback and because only 1 is visible, the others area already hidden so the .fadeIn is called immediately (hence appearing to run at the same time) twice and then a third time for the visible element.

You can confirm this by adding a console.log inside the callback:

  1. $(&quot;.slider .slide .slides&quot;).fadeOut(0, function () {
  2.     $(&quot;.data-slide-&quot; + dataSlide).fadeIn();
  3.     console.log($(this).text())
  4. });

My solution would be to track the "active" element, only hide that and then you only get one callback.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).on(&quot;click&quot;, &quot;.action a&quot;, function(event) {
  2.   let dataSlide = $(this).attr(&quot;data-slide&quot;);
  3.   $(&quot;.slide.active&quot;)
  4.     .removeClass(&quot;active&quot;)
  5.     .fadeOut(500, function() {
  6.       $(&quot;.data-slide-&quot; + dataSlide)
  7.         .addClass(&quot;active&quot;)
  8.         .fadeIn(500);
  9.     })
  10. });
  11. $(&quot;.slide.data-slide-1&quot;).addClass(&quot;active&quot;).show();

<!-- language: lang-css -->

  1. .slide {
  2.   display: none;
  3. }
  5. a {
  6.   background: #ccc;
  7.   padding: 4px 6px;
  8. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;div class=&quot;action&quot;&gt;
  3.   &lt;a data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
  4.   &lt;a data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
  5.   &lt;a data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
  6. &lt;/div&gt;
  7. &lt;div class=&quot;slider&quot;&gt;
  8.   &lt;div class=&quot;slides&quot;&gt;
  9.     &lt;div class=&quot;slide data-slide-1&quot;&gt;
  10.       &lt;h1&gt;Slide 1&lt;/h1&gt;
  11.     &lt;/div&gt;
  12.     &lt;div class=&quot;slide data-slide-2&quot;&gt;
  13.       &lt;h1&gt;Slide 2&lt;/h1&gt;
  14.     &lt;/div&gt;
  15.     &lt;div class=&quot;slide data-slide-3&quot;&gt;
  16.       &lt;h1&gt;Slide 3&lt;/h1&gt;
  17.     &lt;/div&gt;
  18.   &lt;/div&gt;
  19. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

  1. $(document).on("click", ".action a", function(event) {
  2.   let slide = $(".data-slide-" + $(this).attr("data-slide"))
  3.   slide.siblings().fadeOut(0, function() {
  4.     slide.fadeIn();
  5.   });
  6. });
  1. .slides {
  2.   display: none;
  3. }
  5. .data-slide-1 {
  6.   display: block;
  7. }
  9. a {
  10.   background: #ccc;
  11.   padding: 4px 6px;
  12. }
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <div class="action">
  3.   <a data-slide="1">1</a>
  4.   <a data-slide="2">2</a>
  5.   <a data-slide="3">3</a>
  6. </div>
  7. <div class="slider">
  8.   <div class="slide">
  9.     <div class="slides data-slide-1">
  10.       <h1>Slide 1</h1>
  11.     </div>
  12.     <div class="slides data-slide-2">
  13.       <h1>Slide 2</h1>
  14.     </div>
  15.     <div class="slides data-slide-3">
  16.       <h1>Slide 3</h1>
  17.     </div>
  18.   </div>
  19. </div>
英文:

Edit: The issue is that it's per element not just the visible one, and the non-visible ones complete immediately.

Use siblings() to make sure only one animation on one element at same time.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).on(&quot;click&quot;, &quot;.action a&quot;, function(event) {
  2.   let slide = $(&quot;.data-slide-&quot; + $(this).attr(&quot;data-slide&quot;))
  3.   slide.siblings().fadeOut(0, function() {
  4.     slide.fadeIn();
  5.   });
  6. });

<!-- language: lang-css -->

  1. .slides {
  2.   display: none;
  3. }
  5. .data-slide-1 {
  6.   display: block;
  7. }
  9. a {
  10.   background: #ccc;
  11.   padding: 4px 6px;
  12. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;div class=&quot;action&quot;&gt;
  3.     &lt;a data-slide=&quot;1&quot;&gt;1&lt;/a&gt;
  4.     &lt;a data-slide=&quot;2&quot;&gt;2&lt;/a&gt;
  5.     &lt;a data-slide=&quot;3&quot;&gt;3&lt;/a&gt;
  6. &lt;/div&gt;
  7. &lt;div class=&quot;slider&quot;&gt;
  8.     &lt;div class=&quot;slide&quot;&gt;
  9.         &lt;div class=&quot;slides data-slide-1&quot;&gt;
  10.             &lt;h1&gt;Slide 1&lt;/h1&gt;
  11.         &lt;/div&gt;
  12.         &lt;div class=&quot;slides data-slide-2&quot;&gt;
  13.             &lt;h1&gt;Slide 2&lt;/h1&gt;
  14.         &lt;/div&gt;
  15.         &lt;div class=&quot;slides data-slide-3&quot;&gt;
  16.             &lt;h1&gt;Slide 3&lt;/h1&gt;
  17.         &lt;/div&gt;
  18.     &lt;/div&gt;
  19. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 0

以下是翻译好的部分：

你可以使用 .promise() 即一旦 fadeout 完成后调用 fadein，.promise() 方法返回一个动态生成的 Promise，一旦前面链中的所有操作结束，它就会被解决。

  1. $(document).ready(function () {
  2.   $(document).on("click", ".action a", function (event) {
  3.     let slide = $(".data-slide-" + $(this).attr("data-slide"));
  4.     slide.siblings().fadeOut(0).promise().done(function () {
  5.       slide.fadeIn();
  6.     });
  7.   });
  8. });

这是 fiddle：
https://codepen.io/nitinjs-the-typescripter/pen/XWxbOyW

英文:

You can use .promise() i.e once the fadeout finishes you call fadein, The .promise() method returns a dynamically generated Promise that is resolved once all actions in previous chain are ended.

  1. $(document).ready(function () {
  2.   $(document).on(&quot;click&quot;, &quot;.action a&quot;, function (event) {
  3.     let slide = $(&quot;.data-slide-&quot; + $(this).attr(&quot;data-slide&quot;));
  4.     slide.siblings().fadeOut(0).promise().done(function () {
  5.       slide.fadeIn();
  6.     });
  7.   });
  8. });

here's the fiddle:
https://codepen.io/nitinjs-the-typescripter/pen/XWxbOyW

huangapple
  • 本文由 发表于 2023年4月11日 14:06:43
  • 转载请务必保留本文链接：https://go.coder-hub.com/75982823.html
  • css
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定