8

多くのウェブサイトでこれを見てきましたが、説明できるかどうかわかりません。

ユーザーが別のメニュー リンクなどにカーソルを合わせたときにスライドするメニュー項目の下の矢印のように、ナビゲーションにスライド要素がある場合があります。

簡単なメニューは次のとおりです。

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link number 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link something 4</a></li>
    <li><a href="#">Link 5</a></li>
</ul>

そして、いくつかのjQuery（単純なcss :hoverで同じ効果が得られることはわかっています）：

jQuery('ul li a').hover(function() {
    jQuery('a').removeClass('active');
    jQuery(this).addClass('active');
});

また、作業中のjsfiddle：

http://jsfiddle.net/8EvhK/

ホバーするとボタンの背景が赤くなります。ホバーすると、この背景がこれらのボタン間でスライドして変換 (幅) され​​ます。

そのようなことをする方法は？チュートリアルを探していましたが、運がありません。

どうもありがとう！

4

2 に答える 2

15

  1. jquery の を使用してメニューに要素を追加しますappend。

    $('ul').append('<div id="slider"></div>');

  2. hover任意のメニュー項目、animate水平方向のこの新しい要素、およびpositionイベントwidthを発生させたメニュー項目。

    $('ul li a').hover(function(){

    var left = $(this).parent().position().left;
    var width = $(this).width();

    $('#slider').stop().animate({
        'left' : left,
        'width' : width
    });
});

  3. スライダーを初期状態にリセットします。

    var left = $('ul li:first-child a').parent().position().left;
var width = $('ul li:first-child a').width();
$('#slider').css({'left' : left, 'width' : width});

  4. CSS を追加します。

    #slider {
    position:absolute;
    top: -5px;
    left: 0;
    height: 100%;
    width: 0;
    padding: 5px 15px;
    background-color: #f00;
    z-index:-1;
}

ここに実用的なフィドルがあります：http://jsfiddle.net/5wPQa/2/

于 2012-06-17T10:03:08.537 に答える
-1

この効果はCSS トランジションで実現できます。

ul li {
    display:block;
    padding: 5px 15px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    width:50%;
    -moz-transition: width 1s; /* Firefox 4 */
    -webkit-transition: width 1s; /* Safari and Chrome */
    -o-transition: width 1s; /* Opera */
}

ul li:hover{
    width:100%;
}

ここに例があります。

于 2012-06-17T10:11:56.163 に答える