jquery animate single div

Question

我正在使用div類.item_wrap的多個實例，它在圖像類.item懸停時更改高度。

目前，下面的腳本在鼠標懸停時動畫了div類的所有實例。有沒有一種方法可以讓當前只有div動畫，而沒有其他動畫同時動畫？ ^^;

$(document).ready(function(){ 
    $(".item").hover(
     function(){ 
      $('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500); 
     },  
     function(){ 
      $('.item_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500); 
     } 
    ); 
}); 

的HTML：

<div class="item_wrap"> 
<a href="images/burgundyholographicgoldsequin.jpg" class="item" title="image"> 
<img src="images/burgundyholographicgoldsequin.jpg" width="250" height="192" /></a> 
<div class="item_text">Text here</div> 
</div> 

Answer 1

假設每個項目都有一個類似的關係與item_wrap（例如item_wrap是每個項目的父項），那麼你可以使用一個相對於this的選擇器。

$(document).ready(function(){ 
    $(".item").hover(
     function(){ 
      $(this).parent('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500); 
     },  
     function(){ 
      $(this).parent('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500); 
     } 
    ); 
}); 

這着，當然，取決於你的HTML。

Answer 2

我們需要知道你的網頁的HTML，但總的來說，如果我們假設

<div class="item"> 
    <div class="item_wrap"></div> 
</div> 

然後我會更改您的代碼

$(document).ready(function(){ 
$(".item").hover(function(){ 
$(this).children('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500); 
},  
function() { 
$('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500); 
}); 
}); 

Answer 3

這會更容易，如果我們可以看到一些你的HTML，但是你想使用this與.itemwrap div

例如：

$(document).ready(function(){ 
$(".item").hover(function(){ 
$('.item_wrap', this).animate({duration:'slow', easing:'easeOutBack', height:265 }, 500); 
},  
function() { 
$('.shopitem_wrap', this).stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500); 
}); 
}); 

此鏈接有一個類似的問題：How to get the children of the $(this) selector?