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});

看这里

这是一个带有两张图片的示例find()，用于获取相关信息.caption-holder

于 2013-02-19T14:31:17.303 回答