jQuery counter, чтобы скрыть divs

Question

Я пытаюсь использовать счетчик jQuery для подсчета количества раз, когда курсор входит в div, и если число равно даже div, и если это нечетно, div появляется с определенными эффектами , у меня проблемы, так как это первый раз, когда я использую эти методы, чтобы кто-нибудь мог мне помочь? Вот код и fiddle

Упомянутый сценарий:

/*jslint browser: true*/ 
/*global $, jQuery*/ 

$(document).ready(function() { 

'use strict'; 
$('.user_ui').hide(); 

//$(".user").hover(function() { 
// $(".user_ui").slideDown("fast"); 
// $('.pre_autor').hide(); 
//}, function(){ 
// $(".user_ui").slideUp("fast"); 
// $('.pre_autor').show('fast'); 
//}); 


$('.user').mouseover(function() { 
    var $this = $(this); 
    var $count = parseInt($this.data('count'), 10) + 1; 
    $this.data('count', count); 

    if (count % 2 === 0) { 
    $(".user_ui").slideDown("fast"); 
    $('.pre_autor').hide(); 
    } 
     else { 
     $(".user_ui").slideUp("fast"); 
     $('.pre_autor').show('fast'); 

     } 



}); 
}); 

CSS-код для этой части:

header { 
height: 70px; 
background: cadetblue; 
} 
.main { 
font-family: DIN; 
font-size: 25px; 
letter-spacing: 5px; 
color: white; 
float: left; 
} 
.secondary { 
font-family: 'DIN'; 
font-weight: lighter; 
font-size: 12px; 
letter-spacing: 3px; 
color: white; 
float: left; 
margin-top: 12px; 
margin-left: 5px; 
} 
.user { 
font-size: 25px; 
float: right; 
color: white; 
width: 20px; 
height: 30px; 
position: absolute; 
right: 25px; 
top: 20px; 
-webkit-transition: all 300ms; 
-moz-transition: all 300ms; 
-o-transition: all 300ms; 
transition: all 300ms; 
} 

.user_ui { 
width: auto; 
height: 200px; 
background: cadetblue; 
float: right; 
border-bottom: 1px solid white; 
border-radius: 0 0 0 5px; 
position: absolute; 
top: 70px; 
right: 0; 
} 
.user_ui p { 
margin-left: 5px; 
margin-right: 5px; 
margin-top: 3px; 
color: white; 
font-family: 'DIN-light'; 
text-align: right; 
} 
.pre_autor { 
font-family: 'DIN'; 
font-size: 12px; 
color: white; 
float: left; 
position: relative; 
top: 30px; 
left: 0; 

} 
.autor { 
width: 100px; 
height: 100px; 
float: right; 
margin-top: 15px; 
margin-right: 15px; 
border-radius: 4px 4px 4px 4px; 
} 

код HTML для этой части:

<header> 

<div class="align_user"> 
    <p class="pre_autor">Angus Miguel</p> 

    <div class="user"><i class="fa fa-user"></i></div> 
</div> 
    <div class="user_ui"> 

      <p>Angus Miguel</p> 
      <p>angusmiguel21@gmail.com</p> 
      <img class="autor" src="http://bit.ly/1APlHHT" alt="O Autor" /> 

    </div> 

</header> 

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

Answer 1

См http://jsfiddle.net/e8xjaxm6/3/

У вас есть правильная идея, но у вас пару ошибок. Вы определяете

var $count = parseInt($this.data('count'), 10) + 1; 

, но затем пытается получить к нему доступ, как count вместо $count. Также у вас нет значения по умолчанию data-count. Я добавил один из них в .user как data-count="0", но вы также можете добавить логику, чтобы проверить, существует ли data-count, а по умолчанию - 0 и добавить его в элемент.

Update:

http://jsfiddle.net/e8xjaxm6/4/

я не заметил. Я изменил mouseover на mouseenter. Также изменено if ($count % 2 === 0) - if ($count % 2 === 1)