JQuery MouseEnter не работает для конкретного DIV

Question

Click here to view the demo.

Вот код

jQuery(document).ready(function($) { 
    $(".works").mouseenter(function(e) { 

     $(".img_details").stop().animate({ 'bottom':'5%', 'opacity':'1'},500); 
     e.preventDefault(); 
    }); 

    $(".works").mouseleave(function(e) { 

     $(".img_details").stop().animate({ 'bottom':'100%', 'opacity':'0'},500); 
     e.preventDefault(); 
    }); 

})(jQuery); 

Есть два дивы с именем класса «работает», который держит один DIV, который имеет имя класса «img_details» , Если указатель мыши входит в первый div, «img_details» также загружается в оба div. Я хочу загрузить один раз конкретный div. Что я упустил?

Answer 1

Вы должны использовать this, this будет указывать на текущий объект, здесь он будет в настоящее время парил .works, то вы найдете конкретные .img_details внутри this и анимировать только этот элемент.

jQuery(document).ready(function($) { 
    $(".works").mouseenter(function(e) { 

     $(this).find(".img_details").stop().animate({ 'bottom':'5%', 'opacity':'1'},500); 
     e.preventDefault(); 
    }); 

    $(".works").mouseleave(function(e) { 

     $(this).find(".img_details").stop().animate({ 'bottom':'100%', 'opacity':'0'},500); 
     e.preventDefault(); 
    }); 

})(jQuery); 

Plunker

Answer 2

Пожалуйста, используйте контекстную this:

jQuery(document).ready(function($) { 
    $(".works").mouseenter(function(e) { 
    $(this).find(".img_details").stop().animate({ 
     'bottom': '5%', 
     'opacity': '1' 
    }, 500); 
    e.preventDefault(); 
    }); 
    $(".works").mouseleave(function(e) { 
    $(this).find(".img_details").stop().animate({ 
     'bottom': '100%', 
     'opacity': '0' 
    }, 500); 
    e.preventDefault(); 
    }); 
})(jQuery); 

Причина: Когда вы даете .works снова, он нацелен на каждый .works в документе. Но когда вы даете внутри функции обратного вызова, это относится только к текущему <div>, где произошел mouseenter. Это распространенная ошибка, допущенная всеми новичками jQuery. :)

Выход: http://plnkr.co/edit/bKc00tEebxs9TAONBid4?p=preview

Answer 3

(".img_details") подберет все div, имеющие класс img_details. Вы должны найти img_details под works и использовать анимацию на нем, как показано ниже.

$(".works").mouseenter(function(e) {  
    $(this).find(".img_details").stop().animate({ 'bottom':'5%', 'opacity':'1'},500); 
    e.preventDefault(); 
}); 

$(".works").mouseleave(function(e) { 
    $(this).find(".img_details").stop().animate({ 'bottom':'100%', 'opacity':'0'},500); 
    e.preventDefault(); 
}); 

Plunker: http://plnkr.co/edit/HO7PuyfFwNZj4rpWJwU4?p=preview