0

私たちの質問は、次の場所にある jQuery アニメーションに関するものです。

http://www.simalam.com/leeanderson/profile/

ドロップダウン矢印をクリックしてアニメーションを表示し、プルアップ矢印をクリックしてバナーを閉じます。あなたがそれを見たので、私は問題が何であるかをよりよく説明することができます.

アニメーションは下部近くでびくびくしており、間違った位置で終了します (具体的には 32 ピクセルが高すぎます)。しかし、それは正しい場所から始まります。

-32 と 0 をあらゆる組み合わせで切り替えてみました。好みのアニメーションを実現する唯一の組み合わせは、両方の if ステートメントで 0 0 です。ただし、個人や組織の下にある 32 ピクセルの白い境界線は好ましくありません。

誰か提案があれば、大歓迎です。

これに適用されるコードは次のとおりです。

/* code for dropdown of menu */
$("#dropArrow").click(function () { //with every click, the arrow should rotate
    value += 180; //for every click, add 180 degrees, so that it goes back to either pointing up or down with each click
    if ((value % 325) == 0) { //(hide) before hiding the .topDivSlideWrap, we do this first and restore css settings to default
        $( ".drop" ).css("top", "-0px"); //move .drop back to original positioning
        $( "#individuals" ).css("z-index", "0"); //remove z-index of #individuals
        $( "#organizations" ).css("z-index", "0"); //remove z-index of #individuals
    }   
    $('.topDivSlideWrap').slideToggle('slow', function() {;
    if (value % 325) { //(show), this is set in a callback function so it happens after slideToggle
        $( ".drop" ).css("top", "-32px"); //move .drop up to hide whitespace
        $( "#individuals" ).css("z-index", "1000"); //add z-index of #individuals
        $( "#organizations" ).css("z-index", "1000"); //add z-index of #individuals
    }
    });
    $('#rotate').rotate({  //function within a function
        animateTo:value,easing: $.easing.easeInOutCirc //rotate 180 degrees every time 
        });
});
4

2 に答える 2

1

スライダーを機能させるには、いくつかの問題に対処する必要があります。

この実用的なフィドルの例を参照してください!

1)

スライドと回転を制御する機能は、次のように大幅に削減できます。

// reset variable
var value = 0;

$("#rotate").bind("click", function(e) {

    // prevent browser's default behavior
    e.preventDefault();

    // increment value to control rotation
    value+=180;

    // rotate arrow
    $(this).rotate({
        angle     : 0,
        animateTo : value,
        easing    : $.easing.easeInOutExpo
    });

    // slide contents
    $(".topDivSlideWrap").slideToggle("slow");

});

2)

#individualsと宣言#organizationsがあり、それを に更新すると、コンテンツがコンテナの高さよりはるかに下に移動するように強制されます。css top0

#individuals, #organizations {
    top:0;
}

3)

グレーの劣化で使用される背景画像には、下部に高さ 31px の空白があり、div が背景よりも高いという錯覚を引き起こしています。そのイメージを修正する必要があります。

ここに修正済みのものがあります。右クリックして保存します。 ここに画像の説明を入力

これらの 2 つの変更により、動作中の Fiddle の例に見られるように、問題が解決されます!

于 2012-05-16T20:16:14.367 に答える
0

主な問題はjQueryではなく、CSSのスライダー要素に最初に適用した位置です。修正する必要があるのは、top位置をアニメーション化する場合は、CSS で適切に定義されていることを確認し、margin-top. このプロパティをいじるだけで、問題を解決できます。または: (jQuery コードで)top位置をアニメーション化する代わりに、 を試してくださいmargin-top。ただし、繰り返しになりますが、(たとえば) Safari ブラウザーが要素をアニメーション化しないようにするには、CSS で値を最初に定義する必要があります。

コードを「縮小」するためのその他の提案:

コンマを使用して要素をリストします。

$( "#individuals, #organizations" ).css("z-index", "0");//要素のリストから z-index を削除します。

$( "#individuals, #organizations" ).css("z-index", "1000");// 要素のリストに z-index を追加

if (value % 325) {これはあなたが言ったようなものです例えば：if( 1 + 2) {モジュラスだけで（意味はありません）

あなたが奇妙なタイプミスをしているよりも：

$('.topDivSlideWrap').slideToggle('slow', function() {;  // <-- what is this??? (;)

ハッピーコーディング。

于 2012-05-16T19:19:25.817 に答える