jQuery切换函数-它是如何工作的

jQuery toggle function - how does it work?

本文关键字：何工作 工作 函数 jQuery      更新时间：2023-09-26

我刚刚创建了一个页面来理解jQuery切换函数。通过单击块"P"，我希望块"A"设置动画，再次单击它将撤消动画。(例如，假设块"A"动画左侧100px；然后当我再次点击块"P"时，它将重置为0px；(

我对jQuery一无所知，所以循序渐进的指导将不胜感激。

这是我的代码：

$(document).ready(function() {
  $(".nav").on("click", function() {
    $(".trigger-default").animate({
      left: "140px"
    })
  })
})
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;
}
<div class="nav">
  <span>P</span>
</div>
<div class="trigger-default">
  <span>A</span>
</div>
<div class="trigger-secondary">
  <span>B</span>
</div>

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

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

你可以玩这样的东西：

JSFiddle

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

您应该调整CSS/animation

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