jQuery切换功能 - 它是如何工作的？

Question

我刚刚创建了一个页面来理解jQuery切换功能。通过单击“P＆＃39; P＆＃39;我想阻止＆＃39; A＆＃39;动画并再次单击它将撤消动画。 （例如，让我们说块＆＃39; A＆＃39;动画左侧100px;然后当我再次点击块＆＃39; P＆＃39;它将重置为0px;）

我对jQuery没有任何了解，所以一步一步的指导将非常感激。

这是我的代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".nav").on("click", function() {
    $(".trigger-default").animate({
      left: "140px"
    })
  })
})

＆＃13;

span {
  font-size: 80px;
  padding-left: 50px;
}
.nav {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 50px 160px;
  color: #fff;
  cursor: pointer;
}
.trigger-default {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 100px;
  cursor: pointer;
}
.trigger-secondary {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 300px;
  cursor: pointer;
}
.trigger-default,
.trigger-secondary {
  display: inline;
  position: absolute;
  color: #fff;
}
.nav:hover {
  background: #5BBC2E;
}
.trigger-default:hover {
  background: #202021;
}
.trigger-secondary:hover {
  background: #E12B26;
}

＆＃13;

<div class="nav">
  <span>P</span>
</div>
<div class="trigger-default">
  <span>A</span>
</div>
<div class="trigger-secondary">
  <span>B</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果leftVal = 0元素有style="left: 0;"，则会分配.trigger-default和left: 140px;元素，否则会分配leftVal = "140px"和style="left: 140px;"。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".nav").on("click", function() {
    
    var leftVal = ($(".trigger-default").css('left') === "140px" ? 0 : "140px");
    
    $(".trigger-default").animate({
      left: leftVal
    })
  })
})

＆＃13;

span {
  font-size: 80px;
  padding-left: 50px;
}
.nav {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 50px 160px;
  color: #fff;
  cursor: pointer;
}
.trigger-default {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 100px;
  cursor: pointer;
}
.trigger-secondary {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 300px;
  cursor: pointer;
}
.trigger-default,
.trigger-secondary {
  display: inline;
  position: absolute;
  color: #fff;
}
.nav:hover {
  background: #5BBC2E;
}
.trigger-default:hover {
  background: #202021;
}
.trigger-secondary:hover {
  background: #E12B26;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <span>P</span>
</div>
<div class="trigger-default">
  <span>A</span>
</div>
<div class="trigger-secondary">
  <span>B</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以玩这样的东西：

JSFiddle

$(document).ready(function() {
  $(".nav").on("click", function() {
      $(".trigger-default").toggle(function () {
          $(this).animate({right: "140px"});
      }, function () {
          $(this).animate({left: "140px"});
      });
  })
})

你应该调整CSS /动画

Answer 3

$(document).ready(function() {
  $(".nav").toggle(function(){
      $('.trigger-default').animate({
        left: 140
      })
    }, function(){
      $('.trigger-default').animate({
        left: 0
      })
    });
});