1

私は Jquery を初めて使用します。Jquery には多くの画像キャプション プラグインがありますが、学習するために独自のプラグインを作成したいと考えていました。

ただし、問題は、1 つの画像にカーソルを合わせると、ページにあるすべての画像に画像のキャプションが表示されることです。おそらくそれは簡単なことですが、私はこれが初めてです助けてください。

私が書いた私の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;
}
4

2 に答える 2

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 });
  });
});
于 2013-02-05T02:51:35.423 に答える
0

ホバー後、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 });
    });
});
于 2013-02-05T02:50:19.120 に答える