切换按钮，显示和隐藏元素，但同时移动按钮

Question

我有一个使用此代码的切换按钮：

<script>
    jQuery(document).ready(function(){
        jQuery('#MyToggleSwitch').live('click', function(event) { 

             jQuery('.ElementToHideAndShow').toggle('show');
        });
    });
</script>

我现在想在按下按钮时将#MyToggleSwitch 向下移动 50px 以隐藏元素，然后将其向后移动 50px 以显示元素...。像电灯开关一样思考。我还想在按下按钮时更改按钮的颜色。我该怎么做呢？以及如何使页面加载时首先隐藏元素？

Answer 1

我不确定为什么需要向下移动按钮来隐藏它。 this work 适合你吗？另外，如果你只隐藏 1 个元素，为什么它是一个类而不是一个 id？

编辑： like this?

编辑：这里是one that animates。但是，不能使用 animate() 对颜色进行动画处理。不过，可能有一些插件可以做到这一点。