0

しようとしているキャプションに問題があります。あなたが私を助けてくれることを願っています。

.caption-holder基本的に、画像の上をスライドさせようとしています。すでに正しく配置されていますが、キャプションをスライドさせたり、目的の画像に表示したりする方法がわかりません。

これは私のjQueryです：

//Caption
$(".photo-container").mouseover(function (){
    $(this)

    imgW = $(this).width();
    imgH = $(this).height();

    $(".caption-holder").css({"display":"block"})
    $(".caption-img-overlay").css({"width":imgW, "height":imgH});
    $(".caption").css({"width":imgW, "padding":"12px 18px 3px 18px"});
});

CSS:

.photo-container {
    background:rgba(251,171,0,0.1);
    position:relative;
    display:inline-block;
}

.caption-holder {
    display:none;
    position:absolute;
    top:0;
    left:0;
}

.caption-img-overlay {
    height:300px;
    background:rgba(251,176,0,0.2);
}

.caption {
    width:0;
    height:56px;
    padding:0 0;
    color:#a65500;
    font-size:14px;
    line-height:14px;
    text-shadow:rgba(255,255,255,0.5) 1px 1px 2px;
    background:url(../images/bg_image_caption.png);
}

そしてHTML：

<div class='photo-container'>
  <img src='image.jpg' />
  <div class='caption-holder'>
    <div class='caption-img-overlay'>
      <div class='caption'>
        <h4>Pruebas</h4>
        <p>texto prueba</p>
      </div>
    </div>
  </div>
</div>

できれば、キャプションを上にスライドさせるのを手伝ってください:)

4

2 に答える 2

0

http://jsfiddle.net/gygHg/ このサンプルを使用

$('.thumbs li').mouseover(function() {      
$(this).find('.caption').fadeIn(500);
});

$('.thumbs li').mouseleave(function() {       
$(this).find('.caption').fadeOut(500);
});
于 2013-02-19T14:20:52.190 に答える
0

これを試して：

$(".caption-holder").height(0).show().animate({height: imgH});

こちらをご覧ください

関連するものを取得するために使用する2つの写真の例を次に示しますfind().caption-holder

于 2013-02-19T14:31:17.303 に答える