Не прячется при быстром зависании в jquery - PullRequest
Новая
       112

Не прячется при быстром зависании в jquery

0 голосов
/ 02 мая 2020

У меня есть всего девять ссылок, которые я хочу, чтобы каждая показывала изображение, когда кто-то наводит на них курсор.

скрипт работает нормально, но если кто-то наводит на них мышь очень быстро, изображения задерживаются и оставайтесь на экране: они не прячутся.

вот настройка: 

$('#1-parent').hover(function(){$('#1-child').fadeIn('0');},function(){$('#1-child').hide();}); 
$('#2-parent').hover(function(){$('#2-child').fadeIn('0');},function(){$('#2-child').hide();}); 
$('#3-parent').hover(function(){$('#3-child').fadeIn('0');},function(){$('#3-child').hide();});
$('#4-parent').hover(function(){$('#4-child').fadeIn('0');},function(){$('#4-child').hide();}); 
$('#5-parent').hover(function(){$('#5-child').fadeIn('0');},function(){$('#5-child').hide();}); 
$('#6-parent').hover(function(){$('#6-child').fadeIn('0');},function(){$('#6-child').hide();}); 
$('#7-parent').hover(function(){$('#7-child').fadeIn('0');},function(){$('#7-child').hide();}); 
$('#8-parent').hover(function(){$('#8-child').fadeIn('0');},function(){$('#8-child').hide();}); 
$('#9-parent').hover(function(){$('#9-child').fadeIn('0');},function(){$('#9-child').hide();});
.links{z-index:1;}
.preview {display:none;}
.container {z-index:-10;
    position:absolute;top:0;left:0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid green;
    width: 100%;
    height: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="links">
<a id="1-parent">Link 1</a><br/>
<a id="2-parent">Link 2</a><br/>
<a id="3-parent">Link 3</a><br/>
<a id="4-parent">Link 1</a><br/>
<a id="5-parent">Link 2</a><br/>
<a id="6-parent">Link 3</a><br/>
<a id="7-parent">Link 1</a><br/>
<a id="8-parent">Link 2</a><br/>
<a id="9-parent">Link 3</a>
</div>


<div class="container">
<img class="preview" id="1-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="2-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="3-child" src="http://placehold.it/300x100/fff000" />
<img class="preview" id="4-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="5-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="6-child" src="http://placehold.it/300x100/fff000" />
<img class="preview" id="7-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="8-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="9-child" src="http://placehold.it/300x100/fff000" />
</div>

1 Ответ

1 голос
/ 03 мая 2020

Вместо .fadeIn('0') используйте .show().

Появление в течение более 0 мс, по сути, аналогично немедленному отображению, за исключением того, что перед началом «анимации» очень короткая задержка - ваш .hide() успевает выстрелить до начала анимации.

Таким образом, он скрывает это, затем fadesin: шкура уже сработала, поэтому не запускается снова = изображение остается на экране.

В качестве альтернативы используйте .finish() перед .hide()

`$('#1-child').finish().hide();`

, который говорит, что сначала нужно завершить / завершить любую анимацию (например, .fadeIn ()) 

$('#1-parent').hover(function(){$('#1-child').show();},function(){$('#1-child').hide();}); 
$('#2-parent').hover(function(){$('#2-child').show();},function(){$('#2-child').hide();}); 
$('#3-parent').hover(function(){$('#3-child').show();},function(){$('#3-child').hide();});
$('#4-parent').hover(function(){$('#4-child').show();},function(){$('#4-child').hide();}); 
$('#5-parent').hover(function(){$('#5-child').show();},function(){$('#5-child').hide();}); 
$('#6-parent').hover(function(){$('#6-child').show();},function(){$('#6-child').hide();}); 
$('#7-parent').hover(function(){$('#7-child').show();},function(){$('#7-child').hide();}); 
$('#8-parent').hover(function(){$('#8-child').show();},function(){$('#8-child').hide();}); 
$('#9-parent').hover(function(){$('#9-child').show();},function(){$('#9-child').hide();});
.links{z-index:1;}
.preview {display:none;}
.container {z-index:-10;
    position:absolute;top:0;left:0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid green;
    width: 100%;
    height: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="links">
<a id="1-parent">Link 1</a><br/>
<a id="2-parent">Link 2</a><br/>
<a id="3-parent">Link 3</a><br/>
<a id="4-parent">Link 1</a><br/>
<a id="5-parent">Link 2</a><br/>
<a id="6-parent">Link 3</a><br/>
<a id="7-parent">Link 1</a><br/>
<a id="8-parent">Link 2</a><br/>
<a id="9-parent">Link 3</a>
</div>


<div class="container">
<img class="preview" id="1-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="2-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="3-child" src="http://placehold.it/300x100/fff000" />
<img class="preview" id="4-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="5-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="6-child" src="http://placehold.it/300x100/fff000" />
<img class="preview" id="7-child" src="http://placehold.it/300x300/fff000" />
<img class="preview" id="8-child" src="http://placehold.it/300x500/ffD000" />
<img class="preview" id="9-child" src="http://placehold.it/300x100/fff000" />
</div>

Для полноты вы можете существенно уменьшить свой код: 

$('.links>a').hover(function() {
    $('.preview[data-id=' + $(this).data("id") + ']').show();
  },
  function() {
    $('.preview[data-id=' + $(this).data("id") + ']').hide();
  });
.links {
  z-index: 1;
}

.preview {
  display: none;
}

.container {
  z-index: -10;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid green;
  width: 100%;
  height: 100vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="links">
  <a data-id="1">Link 1</a><br/>
  <a data-id="2">Link 2</a><br/>
  <a data-id="3">Link 3</a><br/>
  <a data-id="4">Link 1</a><br/>
  <a data-id="5">Link 2</a><br/>
  <a data-id="6">Link 3</a><br/>
  <a data-id="7">Link 1</a><br/>
  <a data-id="8">Link 2</a><br/>
  <a data-id="9">Link 3</a>
</div>


<div class="container">
  <img class="preview" data-id="1" src="http://placehold.it/300x300/fff000" />
  <img class="preview" data-id="2" src="http://placehold.it/300x500/ffD000" />
  <img class="preview" data-id="3" src="http://placehold.it/300x100/fff000" />
  <img class="preview" data-id="4" src="http://placehold.it/300x300/fff000" />
  <img class="preview" data-id="5" src="http://placehold.it/300x500/ffD000" />
  <img class="preview" data-id="6" src="http://placehold.it/300x100/fff000" />
  <img class="preview" data-id="7" src="http://placehold.it/300x300/fff000" />
  <img class="preview" data-id="8" src="http://placehold.it/300x500/ffD000" />
  <img class="preview" data-id="9" src="http://placehold.it/300x100/fff000" />
</div>
...