When you're aiming for $('.div'), make sure you're not mistakenly targeting $('.div1') or $('div'). The element with the class .div doesn't exist in your code, so it's likely a typographical error.
Additionally, if you intend to trigger the event when hovering over a '.div1' element, switch from using .find() to .next(). This is because you want to pinpoint the next sibling rather than a child.
Here is a functional example to guide you:
https://jsbin.com/vipifolahe/edit?html,js,output
HTML
<div>
<div>
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<div>
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<div>
<div class="div1">
</div>
<div class="div2">
</div>
</div>
</div>
CSS
.div1 {
height: 50px;
background-color: red;
}
.div2 {
height: 50px;
background-color: green;
}
.div2 {
opacity: 0;
}
JS
$(".div1").hover(function () {
$(this).next(".div2").animate({
opacity: "1"
}, {
queue: false
});
}, function () {
$(this).next(".div2").animate({
opacity: "0"
}, {
queue: false
});
});
If your aim is to trigger the event when hovering over the parent div, consider this example:
HTML
<div>
<div class="parent">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<div class="parent">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
<div class="parent">
<div class="div1">
</div>
<div class="div2">
</div>
</div>
</div>
JS
$(".parent").hover(function () {
$(this).find(".div2").animate({
opacity: "1"
}, {
queue: false
});
}, function () {
$(this).find(".div2").animate({
opacity: "0"
}, {
queue: false
});
});