1

私は自分では解決できない問題に直面しています：

divがクリックされたときにスライドを上下に切り替えたい背景画像のあるdivを取得しました。問題は、画像が常に完全に（100％）上にスライドするため、画像が消えてしまうことです。クリックして100％下にスライドできるように、20％外に出したいと思います。

.animate（）を試しましたが、画像のアスペクト比が変わるため、スライドしません。

http://spoonfedproject.com/jquery/jquery-slide-with-minimum-height/のようなソリューションを確認しました。ここで、divはスライドイン/アウトしますが、背景画像がありません...

誰かアイデアがありますか？とても感謝しております！

JSフィドル： http： //jsfiddle.net/JmLqp/105/

HTMLコード

<div id="contact"></div>

CSSコード

#contact{
 width:162px;
 height:336px;
 background: url(http://s18.postimage.org/kl4b1rly1/bg_contact.png) no-repeat;
}

JSコード

$("#contact").click(function () {
  $(this).hide("slide", {direction: "up"}, 1000);
});
4

2 に答える 2

6

あなたは正しい軌道に乗っていましたanimate()：

$("#contact").css('position', 'relative').click(function () {
    if($(this).offset().top == -250) {
         $(this).animate({'top': '0px'}, 1000);
    }
    else {
         $(this).animate({'top': '-250px'}, 1000);
    }
});

position上記のように自分でにを設定する必要があることに注意してくださいrelative。

ワーキングフィドル

于 2013-02-02T15:07:08.227 に答える
0

position: relativeアニメーションのdivに設定するだけで、 jsfiddleの動作を参照してください

#contact{
    position:relative;
    width:162px;
    height:336px;
    background: url(http://s18.postimage.org/kl4b1rly1/bg_contact.png) no-repeat;

}

$("#contact").click(function () {
    tp = $(this).css('top') == '0px' ? '-270px' : '0px';
    $(this).animate( {top: tp }, 1000);
});

更新：
jsfiddleも更新して、上下に移動できるようにしました。これはマイナーな追加でした。

于 2013-02-02T15:13:33.897 に答える