Jquery中的圖像標題

Question

我是Jquery的新手，雖然有很多Jquery的圖像標題插件，但我想創建自己的圖像以便學習。

但是，我得到的問題是，當我將鼠標懸停在一張圖片上時，圖片標題出現在我頁面上的所有圖片上。也許它很簡單，但我是新來的請幫忙。

我Jquery的，我寫的是：

$(document).ready(function(){ 
$('.caption').hide(); 
$('.qitem').hover(function() { 
    $('.caption').animate(
     {opacity: 'show',height: 'show'}, 
     {queue: false, duration: 100 }); 


    }, function() { 
    $('.caption').stop(true) 
    .animate({ 
     opacity: 'hide', 
     height: 'hide' 
     }, {queue: false, duration: 300 }); 
    }); 
}); 

我的HTML是：

<!-- 

<div class="qitem"> 
    <a class="fancybox fancybox.ajax" href="portfolioclient.html"><img src="tmb.jpg" alt="Test 1" title="" width="180" height="180"/></a> 

    <span class="caption"><h4>Tester1</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a class="fancybox fancybox.ajax" href="fancybox/fancyapps-fancyBox-0ffc358/demo/ajax.txt">Ajax</a></p></span> 
</div> 

<div class="qitem"> 
    <a class="fancybox fancybox.ajax" href="portfolioclient.html"><img src="2ndimage.jpg" alt="Test 1" title="" width="180" height="180"/></a> 

    <span class="caption"><h4>Tester</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<a class="fancybox fancybox.ajax" href="fancybox/fancyapps-fancyBox-0ffc358/demo/ajax.txt">Ajax</a></p></span> 
</div> 
--> 

我的CSS是：

.qitem { 

    width:180px; 
    height:180px; 

    /* some styling for the item */ 
    border:4px solid #222; 
    margin: 5px 20px 20px; 

    /* absolute position enabled for children elements*/ 
    position:relative; 


    float:left; 

    /* hand symbol for ie and other browser */ 
    cursor:hand; cursor:pointer; 
} 

.qitem img { 
    border:0; 

    } 

    /* styling for caption, position absolute is a must to set the z-index */ 
.qitem .caption { 
    position:absolute; 
    color:#ccc; 
    display:block; 
    position: absolute; 
    bottom: 0px; 
    background: #000; 
    opacity:0.6; 

    } 

.qitem .caption h4 { 
    font-size:18px; 
    padding:5px 15px 0px 15px; 
    margin:0; 
    color: #3A97F7; 
    font-family: Verdana; 
    letter-spacing: 2px; 
} 

.qitem .caption p { 
    font-size:12px; 
    padding:3px 15px 5px 15px; 
    margin:0; 
    font-family:verdana; 

} 

.qitem a:hover{ 
font-weight:bold; 
color:#00FFCC; 
text-decoration:underline; 
} 
.qitem a{ 
text-decoration:none; 
color:#FFFFFF; 
} 

Answer 1

懸停後，使用this函數來獲取被懸停的物體...

當您使用('.qitem')懸停功能裏面，你會得到再次一切......

$(document).ready(function(){ 
    $('.caption').hide(); 
    $('.qitem').hover(function() { 
     $(this).find('.caption').animate(
     {opacity: 'show',height: 'show'}, 
     {queue: false, duration: 100 }); 


    }, function() { 
     $(this).find('.caption').stop(true) 
     .animate({ 
     opacity: 'hide', 
     height: 'hide' 
     }, {queue: false, duration: 300 }); 
    }); 
}); 

Answer 2

使用$(this).find('.caption')找到特別說明：

$(document).ready(function(){ 
$('.caption').hide(); 
$('.qitem').hover(function() { 
    $(this).find('.caption').animate(
     {opacity: 'show',height: 'show'}, 
     {queue: false, duration: 100 }); 


    }, function() { 
    $(this).find('.caption').stop(true) 
    .animate({ 
     opacity: 'hide', 
     height: 'hide' 
     }, {queue: false, duration: 300 }); 
    }); 
});