jQuery mouseover/mouseout на элементе с детьми

Question

У меня есть div с одним или несколькими детьми. Когда я наводил указатель на родителя, должен показать дочерний div. Проблема в том, что, когда я нависаю над ребенком, который он скрывает, он снова показывает. Как я могу исправить это, чтобы скрыть ребенка, когда перестаю зависать над родителем.

jsfiddle code here

.parent{ 
    width: 200px; 
    height: 200px; 
    background: red; 
} 
.child{ 
    width: 100px; 
    height: 100px; 
    background: green; 
    opacity: 0; 
    display: none; 
} 
.console{ 
    width: 200px; 
    height: 50px; 
    background: pink; 
} 

<div class="parent"> 
    <div class="child"></div> 
</div> 
<div class="console"></div> 

var hovS = 0; 
$('.parent').mouseover(function(){ 
    if(hovS == 0){ 
     $('.child').css('display', 'block'); 
     $('.child').animate({ 
      opacity: 1 
     }); 
     hovS = 1; 
    } 
    $('.console').append(hovS + ' - ');  
}); 
$('.parent').mouseout(function(){ 
    if(hovS == 1){ 
     $('.child').css('display', 'none'); 
     $('.child').animate({ 
      opacity: 0 
     }); 
     hovS = 0; 
    } 
    $('.console').append(hovS + ' - '); 
}); 

jsfiddle code here

Answer 1

Похоже, вы делаете это способ сложнее, чем вы должны со всеми изменениями CSS ... так как вы используете JQuery, почему не просто сделать что-то как это?

JSFiddle

$(".parent").hover(function() { 
    $(".child").fadeIn(); 
}, function() { 
    $(".child").fadeOut(); 
}); 

Кроме того, поскольку эти классы это подразумевает, что может быть несколько родителей и детей ... Вы можете захотеть изменить селектор ребенка на что-то вроде $(this).find(".child")...

---

Если вы действительно нужна консольная штука ...

JSFiddle

$(".parent").hover(function() { 
    $(this).find(".child").fadeIn(); 
    $(".console").append("1 - "); 
}, function() { 
    $(this).find(".child").fadeOut(); 
    $(".console").append("0 - "); 
}); 

Answer 2

Попробуйте использовать событие парения, это не распространение информации о вниз к дочерним элементам. Таким образом, это выглядело бы примерно так:

var hovS = 0; 
$('.parent').hover(function(){ 

    if(hovS == 0){ 
    $('.child').css('display', 'block'); 
    $('.child').animate({ 
     opacity: 1 
    }); 
    hovS = 1; 
    } 
    $('.console').append(hovS + ' - ');  
},function(){ 
    if(hovS == 1){ 
    $('.child').css('display', 'none'); 
    $('.child').animate({ 
     opacity: 0 
    }); 
    hovS = 0; 
    } 
    $('.console').append(hovS + ' - '); 
}); 

Answer 3

Просто добавьте стоп перед анимацией.

Fiddle here

Как так:

var hovS = 0; 
$('.parent').mouseover(function(){ 
if(hovS == 0){ 
    $('.child').css('display', 'block'); 
    $('.child').stop().animate({ 
     opacity: 1 
    }); 
    hovS = 1; 
} 
$('.console').append(hovS + ' - ');  
}); 
$('.parent').mouseout(function(){ 
if(hovS == 1){ 
    $('.child').css('display', 'none'); 
    $('.child').stop().animate({ 
     opacity: 0 
    }); 
    hovS = 0; 
} 
$('.console').append(hovS + ' - '); 
}); 

Answer 4

Я бы порекомендовал ответ Сэмни; это действительно простая проблема. Тем не менее, если вы действительно хотите, чтобы оживить непрозрачность, я бы сказал, это делать что-то вроде этого:

$('.parent').hover(function() { // use '.hover()', this first function handles the hover-in 
    $('.child').css('display', 'block'); // assign this before the animation starts 

    $('.child').stop().animate({ opacity: 1 }, 400); // use '.stop()' to avoid animation overlaps 

}, function() { // this second function handles the hover-out 
    $('.child').stop().animate({ opacity: 0 }, 400, function() { // callback function for the animation 
     $('.child').css('display', 'none'); // assign this one when the animation is done 
    }); 
}); 

JSFiddle Here