1

これが私がスライディング効果をもたらそうとしているjavascript関数です。

私が欲しいのは、右ボタン（緑色のボタン）をクリックすると、スライド効果によってタブが別のタブに置き換わるはずです。これらはすべてブロック要素です。

ただし、効果は機能していません。jqueryコードで何か問題が発生していると確信しています。（フェード効果は、左ボタン（オレンジ色のボタン）で正常に機能します。

    function activateRightTab()
{
    var eTabIndDiv = document.getElementById ("feature_tabs_indicators").children[0];
    var iIndsCount = eTabIndDiv.childNodes[1].children.length;
    var direction = "right";
    if (iActiveNo < iTabsCount - 1 && iActiveNo >= 0)
    {
        iActiveNo = iActiveNo + 1;
        if (iActiveNo != 1 || iActiveNo != 0)
        {
            $(eTabsDiv.children[iActiveNo - 1]).stop() .animate({"left" : "300px"}, 500);
            eTabsDiv.children[iActiveNo - 1].style.display = "none";
            eTabIndDiv.children[iActiveNo - 1].style.backgroundColor = "rgb(122,121,198)";            
        }
        **$(eTabsDiv.children[iActiveNo]).stop() .animate({"left" : "300px"}, 500);**
        eTabsDiv.children[iActiveNo].style.display = "block";
        eTabIndDiv.children[iActiveNo].style.backgroundColor = "rgb(0,100,200)";        
    }
    activateFeaturesContainer(direction);
    return iActiveNo;
}

これが完全なコード（かなり長い）ですが、それは私が達成しようとしている効果のアイデアを与えてくれます。

Jsfiddle

4

2 に答える 2

1

私はあなたが欲しいものはこのようなものだと思います：http：//www.apple.com/macbookair/

そのためには、最初にを指定div#featuresする必要がありますoverflow: hidden。そうしないと、左に移動したり、右から入ったりするときにコンテンツが非表示になりません。

次にul、新しいコンテンツを表示可能領域のすぐ外側に配置して表示する必要があります。そうしないと、新しいコンテンツが右から入力されません（必要なものであると想定）。あなたの場合、あなたはを設定しなければなりませんleft: 292; display: block。ここで、古いものと新しいものの両方を選択し、ulのアニメーションを適用しますleft: '-=292px'。次に、古いものを非表示にします。それはそれについてする必要があります。

var jNew = $(eTabsDiv.children[iActiveNo]);
var jOld = $(eTabsDiv.children[iActiveNo-1]);
jNew.css({
   'left': 292,
   'display': 'block'
});
jNew.add(jOld).stop(true).animate({
   'left': '-=292px'
}, function() {
   jOld.hide();
});

ノート：

  • のためoverflow: hidden、明確に定義された高さを設定する必要があります。height: autodivはそのコンテンツとともに成長しないため、もはや意味がありません。理想的には、JSを介してその子に合わせて高さを調整します。

  • 簡単な説明をするために、コード内の静的な値を使用しています。幅を変更する場合div#featuresは、コードでも変更する必要があります。より良いメンテナンスのために、div#featureswithの幅を取得.outerWidth()し、その値に基づいてアニメーションを作成することをお勧めします

于 2011-10-11T14:17:56.017 に答える
1

あなたが本当にやろうとしているのは、左右のボタンの間にdivを作成し、その中に5つのliタグを水平に並べて配置し、カルーセルのように左右に移動することです。ユーザーが左ボタンと右ボタンをクリックします。

残念ながら、ブラウザでDOM Inspectorを使用すると、CSSをまとめた方法で、5つのliタグが実際には垂直の列で実行され、コードが少しおかしくなります。

ul id = tabsの周りにdivを配置し、タブが現在占有している幅と正確に設定し、オーバーフロー：非表示にします。次に、内側のulを5つの要素の幅にし、左または右がクリックされるたびに、その左のプロパティを1つのタブの幅だけシフトします。

http://www.baijs.nl/tinycarousel/（右上の「ソース」）のソースを参照するか、アニメーションに使用することもでき ます。

于 2011-10-11T16:21:02.380 に答える