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 を 100% に使用することです。

それが役に立てば幸い 。

于 2012-09-12T14:09:43.287 に答える