Возникли проблемы с использованием .animate () jQuery для анимации div слева направо, справа налево? - PullRequest
Новая
       4

Возникли проблемы с использованием .animate () jQuery для анимации div слева направо, справа налево?

0 голосов
/ 15 июня 2010

Кажется, у меня возникают трудности с использованием jQuery .animate() для анимации абсолютно позиционированного элемента div справа налево при нажатии кнопки и слева направо при нажатии другой кнопки Мне было интересно, если вы захотите помочь мне понять, что я делаю неправильно? Благодарю. Ниже приведен мой соответствующий код CSS, HTML и jQuery. Я могу нажать кнопку #moveLeft, и она действительно оживит ее влево, но когда я нажимаю кнопку #moveRight, ничего не происходит. Куда я иду не так?

Спасибо !!

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="link/to/stuff">text</a></span>
   <br />
   <span id = "scoreHolder">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() {

 var config = {
   "left" : function() { 
     return $(this).offset().left;
     },
    "right" : function() {
        return $("body").innerWidth() - $K("#scorecardTwo").width();
      }
  };

  $("#scorecardTwo").css(config).animate({"left": "0px"}, "slow");
  $(this).attr("disabled", "disabled");
  $("#moveRight").attr("disabled", "");
 });

 $("#moveRight").bind("click", function() {

   var config = {
     "left" : function() { 
       return $(this).offset().left;
      },
      "right" : function() {
       return $("body").innerWidth() - $K("#scorecardTwo").width();
      }
   };

   $("#scorecardTwo").css(config).animate({"right" : "0px"}, "slow");
   $(this).attr("disabled", "disabled");
   $("#moveLeft").attr("disabled", "");
 });

1 Ответ

4 голосов
/ 15 июня 2010

При перемещении вправо, вы должны установить CSS left на null.

Демо 

$("#moveRight").click(function() {
    var config = {
        left: null,
        right: $("body").innerWidth() - $("#scorecardTwo").width()
    }

    $("#scorecardTwo").css(config).animate({right : "0px"}, "slow");
    $(this).attr("disabled", "disabled");
    $("#moveLeft").attr("disabled", "");
});
...