1 回答

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊
解釋?zhuān)河捎谒性囟加蓄?lèi)似的事件綁定,我創(chuàng)建了一個(gè)commonEvent函數(shù),減少了代碼。該fadeOut函數(shù)接受回調(diào)函數(shù)作為參數(shù),該函數(shù)在fadeOut執(zhí)行時(shí)執(zhí)行。單擊時(shí).box1,其left屬性設(shè)置為1200px。500px這就是為什么,我在它的回調(diào)函數(shù)中將它的值改回了,即初始值。
$(function() {
$(".box2,.box3").hide();
$(".box1").click(function() {
commonEvent($(this), $(".box2"));
});
$(".box2").click(function() {
commonEvent($(this), $(".box3"));
});
$(".box3").click(function() {
commonEvent($(this), $(".box1"));
});
})
function commonEvent(element, other) {
element.animate({
left: "1200px"
}, 1000).fadeOut("normal", () => {
element.css("left", "500px");
})
other.fadeIn();
}
body {
position: relative;
}
.box1 {
width: 300px;
height: 300px;
background-color: rgb(255, 0, 0);
position: absolute;
top: 300px;
left: 500px;
}
.box2 {
width: 300px;
height: 300px;
background-color: rgb(2, 149, 246);
position: absolute;
top: 300px;
left: 500px;
}
.box3 {
width: 300px;
height: 300px;
background-color: rgb(22, 187, 0);
position: absolute;
top: 300px;
left: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
添加回答
舉報(bào)