0

我正在尝试在我的网站的移动版本中为“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 );
            }
        });
    }

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

4

2 回答 2

0

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

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); 
});

或在行动中。我用tapevent替换了，click这样我就可以看到我在做什么。无论如何，它现在应该工作得更好。

可能有一些更苗条的方法可以让它工作，但我现在想不出任何方法（也许是某种toggle方法）。

于 2013-08-18T15:38:00.897 回答
0

尝试这个

$( "#iconReorder" ).animate({
    'margin-left': 15
}, 500 );
于 2013-08-18T15:38:24.913 回答