Javascript jQuery动画问题

这有点难以解释，所以我将粘贴函数，并解释它的功能

function close(r){
    if(r !== undefined){
        $('#close').attr('name','1');
        $('#close').css({
            top: 30,
            left: 30
        });
        $('#close').html('First click here');
    }else{
        switch($('#close').attr('name')){
            case '1':
                $('#close').attr('name','2');
                $('#close').animate({
                    bottom: 30,
                    right: 30
                },1000);
                $('#close').html('Now click here');
            break;
            case '2':
                $('#close').attr('name','3');
                $('#close').animate({
                    bottom: 30,
                    left: 30
                },1000);
                $('#close').html('A now click here');
            break;
            case '3':
                $('#close').attr('name','4');
                $('#close').animate({
                    top: 30,
                    right: 30
                },1000);
                $('#close').html('And finally click here');
            break;
            case '4':
                $('#close').remove();
            break;
        }
    }
}

如果你需要解释，就这样吧

关闭函数首先称为

close（1）

。这会将位置设置为顶部：30和左侧：30。注意，它的位置在样式表中已经设置为绝对。第一部分是有效的，无论我选择放在哪里，它都会被遵守

#close元素有一个oclick分配给

close（）

。正如您所见，每次单击它时，都会发生不同的操作。除了动画之外，一切都正常（即html和name属性更改）。#闭合元件保持静止

在最后一次单击时，元素成功消失

有人有什么想法吗

干杯

---

Gausie

第一次在您的周围设置

左：30px

。第二次将

设置为右：30px

。但是仍然设置了

left:30px

。它们不是专属财产；设置二者都应该使元素扩展以适应30px左边缘和30px右边缘之间的空间量

但是，我猜

close

元素的宽度是固定的。这就剩下

左：30px；右：30px；宽度：100px

，这会导致忽略

right

属性，不会产生任何移动。这同样适用于

top

​/​<代码>底部​/​<代码>高度

要在左对齐和右对齐位置之间设置动画，只需编写

left

或

right

中的一个脚本。要了解右对齐位置的

left

像素位置是什么，您必须查看元素包含块的大小。假设包含块是整个文档：

<div id="close" style="background: red; position: absolute; width: 100px; height: 50px;">foo</div>
<script type="text/javascript">
    var close_step= 0;
    $('#close').click(function() {
        if (close_step>=4) {
            $(this).remove();
            return;
        }
        var w= $(window).width()-$(this).width()-30*2;
        var h= $(window).height()-$(this).height()-30*2;
        var x= [0, 1, 0, 1][close_step]*w+30;
        var y= [0, 1, 1, 0][close_step]*h+30;
        var pos= {left: x+'px', top: y+'px'};
        if (close_step===0)
            $(this).css(pos);
        else
            $(this).animate(pos);
        $(this).text([
            'First click here', 'Now click here', 'And now click here', 'And finally click here'
        ][close_step]);
        close_step++;
    }).click();
</script>

foo
var close_step=0；
$（“#关闭”）。单击（函数（）{
如果（关闭步骤>=4）{
$（this.remove（）；
返回；
}
var w=$（window.width（）-$（this.width（）-30*2；
var h=$（窗口）.height（）-$（此）.height（）-30*2；
var x=[0,1,0,1][close_step]*w+30；
变量y=[0,1,1,0][close_step]*h+30；
var pos={left:x+'px'，top:y+'px'}；
如果（关闭步骤===0）
$（this.css（pos）；
其他的
$（此）。动画（pos）；
$（此）.text([
“首先单击此处”，“现在单击此处”，“现在单击此处”，“最后单击此处”
][关闭步骤]；
关闭_step++；
})。单击（）；

---

如果

#close

嵌套在一个位置为

的块中，则需要查看该块的宽度/高度，而不是
窗口
，这是一个非常可怕的代码。我可能会被贴上冒犯的标签，但这可能是值得重构的。不是冒犯性的-建设性的！你会怎么做呢？至少，让case语句调用一个传递数字和要显示的字符串的函数。这将是一个很好的开始，您可能会从中找到更好的方法。对于初学者来说，看起来您可以使用
$（'#close'）.attr（'name'），（parseInt（$（'#close'）.attr（'name'））+1.toString（）完全替换开关（不完全是这样，但是嘿…）多么棒的回答-谢谢！我刚刚通过检查他们解决了过度训练的问题。但是非常感谢你！如何使用您希望检索的键（`$（this）.text（['First click here'，'Now click here'，'Now click here'，'Now click here'，'Now click here'，'finally click here'].`）跟随数组的策略。。。我不知道它是否有一个合适的名称，因为它是任何具有数组文本的语言的一个相当正常的结果。我将命名内联数组文字解引用，使其听起来很时髦。