Question

我正试图在我的网站的移动版本中为'div'制作动画。

$(function(){
    $( "#iconReorder" ).bind( "tap", tapHandler );

        function tapHandler( event ){
            $( "#iconReorder" ).animate({
                marginLeft: "15px"
                 }, 500 );
        }
});

当'div'改变位置时，我希望能够再次点击它并让它返回默认位置。

我试图创建一个'if'语句......但我无法理解为什么它不起作用。我想假设我的'div'的'marginLeft'作为我的javascript代码的变量，如果'marginLeft = 10px'将其移动到右边并且如果“new”则将其移动到左边（默认位置） 'marginLeft不再等于10px。我尝试过以下代码：

var x = ("#iconReorder").style.marginLeft;      

    if (x = "10px") {
        $(function(){
            $( "#iconReorder" ).bind( "tap", tapHandler );

            function tapHandler( event ){
                $( "#iconReorder" ).animate({
                    marginLeft: "15px"
                }, 500 );
            }
        });
    } else {
        $(function(){
            $( "#iconReorder" ).bind( "tap", tapHandler );

            function tapHandler( event ){
                $( "#iconReorder" ).animate({
                    marginLeft: "10px"
                }, 1000 );
            }
        });
    }

有人能帮助我吗？我希望我所说的是可以理解的。谢谢

Answer 1

因此，如果我理解正确，应该这样做：

var x = $("#iconReorder");      

x.on('tap', function () {
    var to = '10px', time = 1000;
    if (x.css('margin-left') === '10px') {
       to = '15px';
       time = 500;
    }
    x.animate({
        marginLeft: to
    }, time); 
});

或in action。我将tap事件替换为click，以便我可以看到我在做什么。无论如何它现在应该更好。

可能有一些更苗条的方法使它工作，但我现在想不到任何东西（可能是一些toggle方法）。

Answer 2

试试这个

$( "#iconReorder" ).animate({
    'margin-left': 15
}, 500 );

marginLeft作为Javascript变量

2 个答案: