Question

我正在玩一个网站，其中8个三角形形成一个八边形，当用户将鼠标悬停在每个三角形上时，它会从三角形的中心移动20px。目前我的JS看起来像这样：

//pushes out the top triangle
$('#top').hover(
    if($(this).css('moving'){
        function(){
            $(this).animate({top:"-=20px"}, 'slow');
        },
        function(){
            $(this).animate({top:"+=20px"}, 'slow');
        });
    }

但是我不想为每个三角形输入-20px。我实际上在想，如果每个div存储了它需要移动的方向，那么代码可能看起来像：

$(document).ready(function(){

//pushes out the triangle the user is hovering over
$(this).hover(  
        function(){
        $(this).animate({top: this.up}, speed);
                    $(this).animate({right: this.right}, speed);
    },
            function(){
                $(this).animate({top: this.down}, speed);
                    $(this).animate({right: this.left}, speed);
    }
);}

每个div都有变量up，down，left和right。例如，顶部三角形的值为：

top.up= "-=20px"
top.down= "+=20px"
top.left= "+=0px"
top.right= "+=0px"

编辑：在进行下面建议的更改后，这是我的代码：

$(document).ready(function(){
//  if(stationary){
//      stationary=false;
    $("div").hover(
        function(){
            $(this).animate({top: this.data('up') }, "slow");
            $(this).animate({right: this.data('right') }, speed);
        }
    ),
        function(){
            $(this).animate({top: this.data('down') }, speed);
            $(this).animate({right: this.data('left') }, speed);
//              stationary=true;
        }
    );

}

这不会移动div。另外，我在var静止中添加了一个div，只有当前没有div正在移动时才能移动。

Answer 1

那么，

您可以使用data属性：

<div data-top-up="-=20px"></div>

使用它是这样的：

.animate({top: this.data('top-up') }, speed)

从div访问js中的变量

1 个答案: