1 回答

TA貢獻2065條經驗 獲得超14個贊
解釋:由于所有元素都有類似的事件綁定,我創建了一個commonEvent函數,減少了代碼。該fadeOut函數接受回調函數作為參數,該函數在fadeOut執行時執行。單擊時.box1,其left屬性設置為1200px。500px這就是為什么,我在它的回調函數中將它的值改回了,即初始值。
$(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>
添加回答
舉報