我是jquery的初学者。我创建了一个小的jquery thianimate函数。
但我觉得我的jquery代码太长了。
请帮我缩短代码。我写了很多行来保持动画效果。
bindEvents();
function bindEvents(){
oldClickedNumber=0;
$('.dice').hide();
$('.numbers').on('click', function() {
clickedNumber=$(this).text();
if (clickedNumber==1){
$('#dice_1').animate({'top': '0', left: '0' }).show();
if (oldClickedNumber==2){
$('#dice_1').animate({'top': '0', left: '0' }).show();
$('#dice_2').animate({'top': '0', left: '0' }).show();
$('#dice_3').animate({'top': '0', left: '0' }).hide();
$('#dice_4').animate({'top': '0', left: '0' }).hide();
$('#dice_5').animate({'top': '0', left: '0' }).hide();
$('#dice_6').animate({'top': '0', left: '0' }).hide();
} else if (oldClickedNumber==3){
$('#dice_3').hide().animate({'top': '0', left: '0' });
$('#dice_1').animate({'top': '0', left: '0' }).show();
$('#dice_2').animate({'top': '0', left: '0' }).show();
} else if (oldClickedNumber==4){
$('#dice_1').animate({'top': '0', left: '0' }).show();
$('#dice_2').animate({'top': '0', left: '0' }).show();
$('#dice_3').animate({'top': '0', left: '0' }).show();
$('#dice_4').animate({'top': '0', left: '0' }).show();
} else if (oldClickedNumber==5){
$('#dice_1').animate({'top': '0', left: '0' }).show();
$('#dice_2').animate({'top': '0', left: '0' }).show();
$('#dice_3').animate({'top': '0', left: '0' }).show();
$('#dice_4').animate({'top': '0', left: '0' }).show();
$('#dice_5').animate({'top': '0', left: '0' }).show();
} else if (oldClickedNumber==6){
$('#dice_1').animate({'top': '0', left: '0' }).show();
$('#dice_2').animate({'top': '0', left: '0' }).show();
$('#dice_3').animate({'top': '0', left: '0' }).show();
$('#dice_4').animate({'top': '0', left: '0' }).show();
$('#dice_5').animate({'top': '0', left: '0' }).show();
$('#dice_6').animate({'top': '0', left: '0' }).show();
}
oldClickedNumber=clickedNumber;
} else if (clickedNumber==2){
//$('.dice').hide();
$('#dice_1').show().animate({'top': '-40', left: '40' });
$('#dice_2').show().animate({'top': '40', left: '-40' });
$('#dice_3').hide().animate({'top': '0', left: '0' });
$('#dice_4').hide().animate({'top': '0', left: '0' });
$('#dice_5').hide().animate({'top': '0', left: '0' });
$('#dice_6').hide().animate({'top': '0', left: '0' });
oldClickedNumber=clickedNumber;
} else if (clickedNumber==3){
//$('.dice').hide();
$('#dice_1').show().animate({'top': '-50', left: '50' });
$('#dice_2').show().animate({'top': '50', left: '-50' });
$('#dice_3').show().animate({'top': '0', left: '0' });
$('#dice_4').show().animate({'top': '0', left: '0' });
$('#dice_5').show().animate({'top': '0', left: '0' });
$('#dice_6').show().animate({'top': '0', left: '0' });
oldClickedNumber=clickedNumber;
} else if (clickedNumber==4){
//$('.dice').hide();
$('#dice_1').show().animate({'top': '-40', left: '40' });
$('#dice_2').show().animate({'top': '40', left: '-40' });
$('#dice_3').show().animate({'top': '-40', left: '-40' });
$('#dice_4').show().animate({'top': '40', left: '40' });
$('#dice_5').hide().animate({'top': '0', left: '0' });
$('#dice_6').hide().animate({'top': '0', left: '0' });
oldClickedNumber=clickedNumber;
} else if (clickedNumber==5){
//$('.dice').hide();
$('#dice_1').show().animate({'top': '-50', left: '50' });
$('#dice_2').show().animate({'top': '50', left: '-50' });
$('#dice_3').show().animate({'top': '-50', left: '-50' });
$('#dice_4').show().animate({'top': '50', left: '50' });
$('#dice_5').show().animate({'top': '0', left: '0' });
$('#dice_6').show().animate({'top': '0', left: '0' });
oldClickedNumber=clickedNumber;
} else if (clickedNumber==6){
//$('.dice').hide();
$('#dice_1').show().animate({'top': '-50', left: '50' });
$('#dice_2').show().animate({'top': '50', left: '-50' });
$('#dice_3').show().animate({'top': '-50', left: '-50' });
$('#dice_4').show().animate({'top': '50', left: '50' });
$('#dice_5').show().animate({'top': '50', left: '0' });
$('#dice_6').show().animate({'top': '-50', left: '0' });
oldClickedNumber=clickedNumber;
}
});
};.mainContainer {
width: 400px;
height: 300px;
background: #8BC34A;
}
.question {
height: 40px;
padding: 5px;
}
.stage {
width: 400px;
height: 200px;
}
.numButtons {
width: 200px;
height: 200px;
background: blue;
float: left;
position: relative;
}
.buttonsResult {
background: black;
width: 200px;
height: 200px;
float: left;
position: relative;
}
.dice {
height: 30px;
width: 30px;
border: 2px solid blue;
background: white;
border-radius: 30px;
margin-top: 75px;
position: absolute;
margin-left: 85px;
}
.numbers {
color: white;
font-family: cursive;
font-size: 25px;
/* width: 88px; */
/* height: 55px; */
float: left;
padding-right: 4px;
line-height: 55px;
text-align: center;
margin-left: 35px;
margin-top: 25px;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainContainer">
<div class="question">Click the numbers on left to see the same number of DOTs on right.
</div>
<div class="stage">
<div class="numButtons">
<div class="numbers" id="one">1</div>
<div class="numbers" id="two">2</div>
<div class="numbers" id="three">3</div>
<div class="numbers" id="four">4</div>
<div class="numbers" id="five">5</div>
<div class="numbers" id="six">6</div>
</div>
<div class="buttonsResult">
<div class="dice" id="dice_1"></div>
<div class="dice" id="dice_2"></div>
<div class="dice" id="dice_3"></div>
<div class="dice" id="dice_4"></div>
<div class="dice" id="dice_5"></div>
<div class="dice" id="dice_6"></div>
</div>
</div>
</div>
答案 0 :(得分：0)
如果我是你，我会创建一个包含6个对象的列表，作为骰子每个面的定义。每个这样的对象都有一个包含6个对象的列表，表示面部的点状态 - 如果它是可见的，它的位置如果是：
faces = [[
// One - all visible at the same position for the animation of all dots converging to one
{ visible: true, x: 0, y: 0 },
{ visible: true, x: 0, y: 0 },
{ visible: true, x: 0, y: 0 },
{ visible: true, x: 0, y: 0 },
{ visible: true, x: 0, y: 0 },
{ visible: true, x: 0, y: 0 }
], [
// Two
{ visible: true, x: -40, y: -40 },
{ visible: true, x: 40, y: 40 },
{ visible: false },
{ visible: false },
{ visible: false },
{ visible: false }
], ....]
然后，click事件将读取相应面的定义，迭代点元素，然后隐藏或显示每个元素，将它们设置为适当的位置。