эффекты mouseout для выбранного элемента

Question

У меня есть элемент продукта, который получает некоторые эффекты, когда он выбран/отменен. я сделать это с помощью переключаясь на и от выбранного класса на щелчок, как это:

$('.myItem').click(function() { 
    $(this).toggleClass('selected'); 
}) 

Теперь, мне также нужно применить кучу эффектов, когда курсор покидает пункт , когда выбран пункт ,

Я пытался достичь этого разными способами, но не смог. Каков правильный способ достичь этого?

Answer 1

Вы можете использовать MouseLeave для этого, то вы просто должны проверить, если элемент имеет класс, который вы хотите.

$('.myItem').mouseleave(function() { 
    if($(this).hasClass('selected') 
    { 
     //Do effects 
    } 
}); 

Answer 2

Выберите .myItem элемент, который имеет класс .selected и выполнить функцию, которую вы хотите на mouseleave

$(document).on('mouseleave', '.myItem.selected', function() { 
 
    $(this).html('<h1 style="color:#fff;margin:0">Left from selected!</h1>'); 
 
}); 
 
$('.myItem').click(function() { 
 
    $(this).toggleClass('selected').empty(); 
 
})

.myItem { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 
.myItem.selected { background-color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Click to toggle class "selected"</p> 
 
<div class="myItem"></div>

Answer 3

Вам нужно будет добавить проверку выбранного класса вместе с событием mouseleave.

Пример:

$('.myItem').click(function() { 
    $(this).toggleClass('selected'); 
}); 

$('.myItem').mouseleave(function() { 
    if ($(this).hasClass('selected')) { 
     // do animation 
     $(this).animate({ 
      fontSize: "+=10", 
      left: "+=50" 
     }); 
    } 
}); 

Или способ JQuery добавления событий:

$('.myItem').on('click', function() { 
    $(this).toggleClass('selected'); 
}); 

$('.myItem').on('mouseleave', function() { 
    if ($(this).hasClass('selected')) { 
     // do animation 
     $(this).animate({ 
      fontSize: "+=10", 
      left: "+=50" 
     }); 
    } 
}); 

http://jsfiddle.net/qn6zqqeh/1/