简单的学习待办事项......但它对我不起作用。
任务很简单,我正在尝试旋转方形布局中的盒子(路径:向右 -> 向下 -> 向左 -> 向上
)....但它没有动画当它向下
移动后(不会向左
或向上
移动),这是代码:
$('button').click(function () {
$('.box').animate({
"height": "40px",
"width": "40px"
}, 500, function () {
$('.box').animate({
"margin-left": "200px", //go right
}, 1500, function () {
$('.box').animate({
"margin-top": "200px", //go down
}, 1500, function () {
$('.box').animate({ // <===problem starts here
"margin-right": "200px" //go left
//"marginRight": "200px"
}, 1500, function () {
$('.box').animate({
"margin-bottom": "200px" //go up
}, 1500, function () {
$('.box').css("background", "black")
});
});
});
});
});
});
在制作动画时是否有混合边距
的正确方法?请指教...
最佳答案
试试这个:
$('button').click(function () {
$('.box').animate({
"height": "40px",
"width": "40px"
}, 500, function () {
$(this).animate({
"margin-left": "200px", //go right
}, 1500, function () {
$(this).animate({
"margin-top": "200px", //go down
}, 1500, function () {
$(this).animate({ // <===problem starts here
"margin-left": "-=200px" //go left
//"marginRight": "200px"
}, 1500, function () {
$(this).animate({
"margin-top": "-=200px" //go up
}, 1500, function () {
$(this).css("background", "black")
});
});
});
});
});
});
fiddle here
关于jquery - 使用 margin-right 制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26398398/