单击时移动div

Question

我真的无法做一件小事。我希望div1改变它的位置点击div2（注意div2在div1内）并且当再次点击div2时，将div 1置于其原始位置。 （如果你能帮助我用一点动画移动div1那就完美了。）

我在jsfiddle添加了我的例子，我想在第一次点击＆＃34;切换器标题＆＃34;时更改＆＃34;切换器＆＃34;的位置，并在第二次点击时＆＃34;切换器报头＆＃34;采取＆＃34;切换器＆＃34;回到原来的位置。

http://jsfiddle.net/mdx7dpeL/3/

Answer 1

您可以使用变量切换marginLeft，因此只需点击一下左侧动画，然后点击另一个动画即可：

var switched = false;
$(document).ready(function() {
    $('.switcher-header').click(function() {
        var marginLeft = switched ? '-30px' : '30px';
        switched = !switched;
        $('#switcher').animate({
            'marginLeft' : "+=" + marginLeft //moves right
        });
    });
});

当然你需要包含jQuery。

Fiddle