Jquery中的图像标题答案

【问题标题】：Image caption in JqueryJquery中的图像标题
【发布时间】：2013-02-05 02:48:19
【问题描述】：

我是 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;
}

【问题讨论】：

标签： jquery image caption

【解决方案1】：

使用$(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 });
  });
});

【讨论】：

【解决方案2】：

悬停后，使用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 });
    });
});

【讨论】：