0

私はこのコードを持っています:

$(document).ready(function(){

    $(".subscriptions").click(function (){

        if($(".pollSlider").css("margin-right") == "-200px"){
            $('.pollSlider').animate({"margin-right": '+=200'});
            }else{
            $('.pollSlider').animate({"margin-right": '-=200'});
            }
        });

//other exceptions

if($(".pollSlider").css("margin-right") > "200px"){
    $(".pollSlider").css({'margin-righ':'200px'});
    }
if($(".pollSlider").css("margin-right") < "0px"){
    $(".pollSlider").css({'margin-righ':'0px'});
    }
 });

これはcssです：

.pollSlider{
    overflow: auto;
    top:0px;
    position:fixed;
    height:100%;
    background:red;
    width:200px;
    right:0px;
    margin-right: -200px;
    z-index:100;
}

ユーザーがボタンをクリックすると、div が左の 200px から画面にスライドし、ユーザーが同じボタンをもう一度クリックすると、div が右の 200px にアニメーション化されます。このシステムは非常にうまく機能しますが、問題は、div が左または右にアニメーション化されている間にユーザーがクリックし続けると、div が画面の外側 (右) にアニメーション化され、ユーザーが再度クリックしても元に戻らないことです。そのため、//other 例外を追加しようとしましたが、if ステートメントは機能しませんでした。この問題を解決するにはどうすればよいですか?

4

2 に答える 2

1

あなたが作ろうとしている効果を達成しようとしたデモを作成しました。コメントで述べたように、jQuery.stop(…)を使用して、次のアニメーションを開始する前にアニメーション キューを空にします。

また、単位を相対 (+=200および-=200) から固定数 (0および-width) に変更しました。アニメーションが途中で停止し、アニメーションを元に戻す必要があると想定している場合は、固定数を使用するか、新しいアニメーションの前にその場で計算を行う必要があります。

于 2013-01-04T08:33:32.157 に答える
0

この種の問題に対する私の解決策は、グローバル変数を追加して、ユーザーがクリックした後にそれを false に設定し、アニメーションが完了したら tru に戻すことです。

var allowAnimate = true;
$(document).ready(function(){

$(".subscriptions").click(function (){
    if(allowAnimate){
    if($(".pollSlider").css("margin-right") <= "-200px"){
        allowAnimate = false;
        $('.pollSlider').animate({"margin-right": '+=200'}, function(){allowAnimate = true});
        }else if($(".pollSlider").css("margin-right") >= "200px")){
        $('.pollSlider').animate({"margin-right": '-=200'}, function(){allowAnimate = true});
        }
    }
    });

//other exceptions
....

したがって、ユーザーがボタンをクリックすると、変数がに設定されているallowAnimateかどうかがチェックされ、アニメーションが開始され、アニメーション コールバック関数で に戻されます。truefalsetrue

于 2013-01-04T08:12:51.957 に答える