div mouseenter () или hover (), delay (), fadeIn (), множественная запись div меньше, чем время задержки jQuery - PullRequest
Новая
       15

div mouseenter () или hover (), delay (), fadeIn (), множественная запись div меньше, чем время задержки jQuery

0 голосов
/ 02 июня 2018

Я пытаюсь решить эту проблему безуспешно.Я уже пробовал несколько настроек кода.Дело в том.Я получил div, когда div mouseenter () увеличится в размере, а css для другого div изменится после задержки.Когда mouseleave (). Все будет установлено как при начале.Это все отлично работает.Проблема в том, что когда вы вводите один и тот же div несколько раз за период, меньший, чем время задержки (скажем, 2x за 500 мс), он покажет внутренний div и оставит его видимым, даже если мышь находится вне div.Пожалуйста, можете ли вы предложить возможность сделать это?Вот рабочая скрипка с двумя возможностями, которые я заставляю ее работать, но безуспешно для упомянутой проблемы.Спасибо за любые предложения.PS: уже пробовал с if () {(div) .width ()> 110}, но безуспешно, он всегда открытhttps://jsfiddle.net/spanwair/1xzvq55x/

$( ".levaruka" ).hover(function() {
    $(".insidelevaruka").stop(true, true).each(function() {
        setTimeout(function() { 
            $(".insidelevaruka, .e1").fadeIn();                
    }, 600);
    });
    $(this).css({"width": "350px", "height": "350px"});}, function() {
    $(".insidelevaruka").css({"display":"none"});
    $(this).css({"width": "100px", "height": "100px"});
    $(".e1").stop(true, true).css({"display":"none"});
    });


  $(".pravaruka").mouseenter(function() {
    $(".insidepravaruka").delay(600).fadeIn();});
       $(".pravaruka").mouseleave(function() {
    $(".insidepravaruka").hide();});

1 Ответ

0 голосов
/ 02 июня 2018

https://jsfiddle.net/amke9jLh/

$( ".levaruka" ).hover(function() {

    $(".insidelevaruka").attr("hover",1);

    $(".insidelevaruka").finish(true, true).each(function() {
        setTimeout(function() { 
        if($(".insidelevaruka").attr("hover")==1){
          $(".insidelevaruka").fadeIn();
            $(".e1").fadeIn();
            }

    }, 1000);
    });
    $(this).css({"width": "350px", "height": "350px"});
}

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

Я добавил атрибут на внутренней линии.называется hover, который установлен в единицу и сбрасывается во второй части 

function() {

    $(".insidelevaruka").attr("hover",0);
    $(".insidelevaruka").css({"display":"none"});
    $(this).css({"width": "100px", "height": "100px"});
    $(".e1").stop(true, true).css({"display":"none"});

});

  $(".pravaruka").mouseenter(function() {
    $(".insidepravaruka").delay(600).fadeIn();
  });
$(".pravaruka").mouseleave(function() {
    $(".insidepravaruka").hide();

}

теперь он работает нормально, пожалуйста, проверьте

...