1

只需将一个小脚本放在一起，即可在照片上汇总描述。它工作正常，但它的限制是它汇总的数量是一个硬编码的数字。因此，如果标题只有 1 行，它可以正常工作，但如果标题是 2 行，那么它（显然）不会向上移动。

所以我想要发生的是让它在翻转时标题 div 卷起，以便整个事情都显示出来。不管是多少行。

jQuery：

$(".hoverImage").hover(
function(){
    $(this).find(".overlay").animate({top: "108"}, 500 );
},
 function(){
    $(this).find(".overlay").animate({top: "126"}, 500 );
});

html:

    <div class="hoverImage">
    <div class="overlay">
    Headline Goes Here<br>Story text goes here<a href="">[learn more...]</a>
    </div>
    <img src="http://www.ABCDEFG.com/slice.jpg" />
    </div>

CSS：

<style>
.hoverImage{
width: 228px;
height: 151px;
overflow: hidden;
position: relative; 
float:left;
margin-right:10px;  
}
.overlay{
width:220px;
color: #ffffff;
background: url("http://www.ABCDEFG.com/blackBg.png") repeat scroll 0 0 transparent;
position: absolute;
padding-left: 5px;
top: 126px;
}

您可以在此处查看示例和小提琴

4

2 回答 2

0

您可以使用bottom属性，而不是top：

.overlay{
   ...
   bottom: -20px;
}


$(".hoverImage").hover(
function() {
    $(this).find(".overlay").animate({
        bottom: "0"
    }, 500);
}, function() {
    $(this).find(".overlay").animate({
        bottom: "-20px"
    }, 500);
});

http://jsfiddle.net/MLqWH/

于 2012-09-12T13:49:39.267 回答
0

你应该把 if 语句像：

if $('YOUR.CLASS.NAME').val(); 或者如果 $(YOUR.CLASS.NAME).width(); IS == YOUR-PREFERRED-VALUE THEN {YOUR ACTION} 所以你的动作可以是 .animate.stop() 或 $(this).css("width") = YOUR-PREFERED-VALUE 。我觉得你应该限制你的 THING 高度或宽度。

我想到的另一种方法是在 Jquery 中使用 bottom = 0 并使用 height 或 width to 100% 。

希望能帮助到你 。

于 2012-09-12T14:09:43.287 回答