Анимируйте абсолютно позиционированный div, но остановитесь, если условие истинно? - PullRequest
Новая
       10

Анимируйте абсолютно позиционированный div, но остановитесь, если условие истинно?

2 голосов
/ 13 июня 2010

У меня есть div, который я помещаю в верхнем правом углу веб-сайта, абсолютно позиционируемый в top: 0px и right : 0px. Я хочу использовать функцию анимации jquery для анимации div влево или вправо на определенное количество при нажатии кнопки, но остановите анимацию, если в любое время смещение div влево или вправо меньше определенного числа. Я хочу сделать это для размещения пользователей, которые нажимают левую или правую кнопки более одного раза, чтобы div не вылетал из поля зрения. Как это сделать? Ниже мой соответствующий код CSS, HTML и JQuery:

CSS: 

  #scorecardTwo {
    position:absolute;
      padding:5px;
      width: 300px;
      background-color:#E1E1E1;
      right:0px;
      top:0px;
      display:none;
  }

HTML: 

        <div id = "scorecardTwo"> 
            <span id = "dealHolder"><a href="some/link">some text</a></span>
            <br />
            <span id = "scoreHolder">some text</span>
            <br />
            <button type="button" id="moveLeft">Left</button>&nbsp;<button type="button" id="moveRight">Right</button>
        </div>

jQuery (на данный момент): 

    $("#scorecardTwo").fadeIn("slow");

    $("#moveLeft").bind("click", function() {
            $("#scorecardTwo").animate({"right":"+=76%"}, "slow");
                            // how to stop animation if offset is less than appropriate number?
    });

    $("#moveRight").bind("click", function() {
            $("#scorecardTwo").animate({"right" : "-=76%"}, "slow");
                            // how to stop animation if offset is less than appropriate number?
    });

1 Ответ

2 голосов
/ 13 июня 2010

Один из способов - удалить прослушиватель событий при нажатии кнопки один раз, чтобы пользователь не мог щелкнуть снова: 

$("#moveLeft").bind("click", function() {
    $("#scorecardTwo").animate({"right":"+=76%"}, "slow");
    $(this).unbind('click', arguments.callee);
});

Другой способ - проверить местоположение на каждом шаге: 

$("#moveLeft").bind("click", function() {
    $("#scorecardTwo").animate({"right":"+=76%"}, {
        speed: "slow",
        step: function(right) {
            if (right >= 70) { // stop at ~70
                $("#scorecardTwo").stop();
            }
        }
    });
});
...