0

利用できるようにjQueryライブラリを使用しています。このページにスライド効果を追加する方法を知る必要があります。

http://qasim.x10.mx/iqbal/

クリックするとフェードインとフェードアウトになりますが、スライドさせたいと思います。それらがどのように機能するかについては少し考えていますが、現在のコーディング方法では、実装の適切なテクニックがわかりません。 。最も簡単な方法は何でしょうか？

どうもありがとう。

4

1 に答える 1

0

あなたのサイトを理解しているように、フェードトランジションを行う次のコードがあります。

$('nav ul li').not('#line').click(function(){
    selected = $(this).attr('id');
    $('nav ul li').css({'background': '', 'color': '#999'});
    $(this).css({'background': getColor(selected), 'color': '#FFF'});

    $('.content').fadeOut('fast', function(){
        $(this).html($('div#'+selected).html());
        $(this).fadeIn('fast');
    })

})

スライドさせたい場合は、jQuery UI を使用した方が簡単でしょう。左にスライドしてフェードオフするようなものが必要な場合は、jQuery UI でドロップ遷移を使用してこれを実現できます。

$('nav ul li').not('#line').click(function(){
    selected = $(this).attr('id');
    $('nav ul li').css({'background': '', 'color': '#999'});
    $(this).css({'background': getColor(selected), 'color': '#FFF'});

    $('.content').hide('drop', {direction: 'left'}, 'fast', function(){
        $(this).html($('div#'+selected).html());
        $(this).show('drop', {direction: 'right'}, 'fast');
    })

})

私は明らかにあなたのサイトでこの正確なコードを実行しようとはしませんでしたが、間違いなくそのように見えます.

ドロップ効果の詳細については、次を参照してください。

うまくいけば、これが役に立ちます。:)

于 2011-09-26T00:20:08.000 に答える