0

リスト項目がインラインブロックで表示されるリストがあるので、それらは水平になります。

私はjqueryを使用して、要素が上に置かれたときに20px上にスライドし、マウスが離れたときに20px下に戻そうとしています。

こちらの製品画像とまったく同じです: http://www.google.co.uk/nexus/

slideUp と slideDown はこれを許可していないようです。これはどのように達成できますか？

また、よりスムーズな効果が得られる場合は、css トランジションを使用することもできますが、これを行う方法がわかりません。

私のマークアップは次のとおりです。

<div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
4

5 に答える 5

2

jQuery.animate() を使用: http://api.jquery.com/animate/

$("element").animate({marginTop : "-20px"}, 500);

これは、samrap が提供するサンプル マークアップを使用した CSS 変換アプローチ (JavaScript なし) のフィドルです: http://jsfiddle.net/qAeFH/

于 2013-08-14T21:27:49.317 に答える
1

jQuery.css(); も使用できます。

$('#menu').css('top', '0px');

デモ

于 2013-08-14T21:31:11.103 に答える
1

その方法を選択した場合の CSS の簡単な例を次に示します。 http://jsfiddle.net/7hZkG/4/

#slide-up li{
    display:inline-block;
    position:relative;

    -webkit-transition: all 100ms ease-in-out; 
    -moz-transition: all 100ms ease-in-out; 
    -o-transition: all 100ms ease-in-out; 
    transition: all 100ms ease-in-out;

    top:0px;
}

#slide-up li:hover{
    top:-10px;

    -webkit-transition: all 100ms ease-in-out; 
    -moz-transition: all 100ms ease-in-out; 
    -o-transition: all 100ms ease-in-out; 
    transition: all 100ms ease-in-out;
}
于 2013-08-14T21:37:15.823 に答える
1

JS は、このタスクにはやり過ぎだと思います。単純に CSS を使用できます。秘訣は、topまたはtransform: translateプロパティを変更することです。最初のケースでは、おそらく必要position:relativeです。

transform ここのライブデモとここのデモを見ることができtop ます。

于 2013-08-14T21:35:28.380 に答える
0

jQuery を使用して各リスト アイテムにこの効果を追加するには、次の操作を行います。

$("li").hover( function () {
  $(this).animate({marginTop: "-20px"}, 500);
},
function () {
  $(this).animate({marginTop: "0"}, 500);
}
);

500は、アニメーションの速度をミリ秒単位で制御します。

于 2013-08-14T21:40:39.177 に答える