我刚刚创建了一个页面来理解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;"
元素(如果它有.trigger-default
),否则将分配left: 140px;
和leftVal = "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>
关于javascript - jQuery切换功能-如何运作?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31299109/