jQuery несколько событий наведения - мышь не стреляет

Question

Действие: Наведите указатель мыши на несколько элементов «h2» одним движением мыши.

Ожидаемое поведение: fadeIn и fadeOut соответствующие элементы «статьи», один за другим. Одновременно должны быть видны только одна статья, и никакие элементы статьи не должны быть видны после того, как все элементы h2 будут опущены.

Актуальное описание: видна одна или несколько статей.

Мой отзыв: ??? Попробуйте вещи в течение 2 дней ... ??? Перейдите в stackoverflow и надейтесь на помощь. (Заранее спасибо!)

jsfiddle

<div> 
    <h2>heading 1</h2> 
    <h2>heading 2</h2> 
    <h2>heading 3</h2> 
</div> 
<div> 
    <article>article 1</article> 
    <article>article 2</article> 
    <article>article 3</article> 
</div> 

<style> 
    article { 
     display: none; 
    }; 
</style> 

<script> 
    $(document).ready(function(){ 

var clicked = false; 
var hovered = false; 
//click behavior  
    $("h2").click(function(event){ 
     var index = $(this).closest("h2").index() + 1; 
     $("article:not(article:nth-of-type(" + index + "))").fadeOut(); 
      $("article").promise().done(function(){ 
       if (clicked == true) { 
        $("article:nth-of-type(" + index + ")").fadeOut(); 
        clicked = false; 
        hovered = false; 
       } else if (hovered == true){ 
        clicked = true; 
       } else { 
        $("article:nth-of-type(" + index + ")").fadeIn(); 
        clicked = true; 
       } 

     }); 
    }); 

//click anywhere else to hide articles  
    $(document).click(function(event){ 
     if (!$(event.target).closest("h2").length) {    
      $("article").fadeOut(); 
      clicked = false; 
      hovered = false; 
     }; 
    }); 
//hover behavior 

    $("h2").hover(function(event){ 
     var index = $(this).closest("h2").index() + 1; 
     if (clicked == false) { 
      hovered = true; 
      $("article").promise().done(function(){ 
       $("article:not(article:nth-of-type(" + index + "))").fadeOut(); 
       $("article").promise().done(function(){ 
        $("article:nth-of-type(" + index + ")").fadeIn(); 
      });}); 
     };}, function() { 
     if (clicked == false) { 
      $("article").promise().done(function(){ 
       $("article").fadeOut(); 
       hovered = false; 
      }); 
     }; 
    }); 
}); 
</script> 

Answer 1

Посмотрите на обновленную скрипкой: http://jsfiddle.net/0n0g0gtx/4/

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

Jquery

$(document).ready(function(){ 
    $(document).on({ 
     mouseenter: function() {    
      $("article").finish(); 
      $("article").eq($(this).index()).fadeIn(); 
     }, 

     mouseleave: function() {    
      $("article").fadeOut(); 
     } 
    }, "h2"); 
}); 

Этот код работает «отделочными» все анимации на статью, а затем исчезает в статье на основе индекса h2. При уходе с мыши оно исчезает из всех статей.

Answer 2

Ваш зависания быстро до Fade Out анимация завершена, так что вы видите более двух статей, когда при наведении курсора мыши.

По умолчанию fadeout() анимация имеет длительность 400 мс

Я предлагаю вам использовать fadeOut(duration); свойство для установки времени для анимации, как

fadeOut(1);// or work around the best suited time (in milli secs) for you 

Answer 3

Вы можете использовать гораздо более простой код

$(document).ready(function(){ 
    $("h2").hover( 
    function(){ 
     $("article").finish(); 
     $("article").eq($(this).index()).fadeIn(300); 
    }, 
    function(){ 
     $("article").hide(); 
    }); 
}); 

см это http://jsbin.com/mavefohobe/1/edit?html,js,console,output