JQuery切换寄存器多个div

Question

我有以下问题。

我有一个注册表，它在页面的右边。它的末尾有一个按钮，如果你点击这个按钮，注册表应该会切换到屏幕上，如果你再次点击，它应该会再次隐藏。

这是我目前的解决方案：

jsfiddle.net/6JLr9/

(按钮:绿色，内容:红色

我这里的问题是:在隐藏和显示动画的过程中，按钮不会移动，当动画结束时，按钮会直接移动到新的(正确的)位置。怎样才能让按钮同时移动？

提前谢谢你

Answer 1

我已经更新了你的jsfiddle。更改了js和css中的一些东西。

JS：

$(document).ready(
function(){
    $('.registers').click(
        function(){
            if($(this).hasClass('open')){
                $('.registers-wrapper').animate({'margin-left':'-33px'},1000);
                $(this).removeClass('open');
            }else{
                $('.registers-wrapper').animate({'margin-left':'-233px'},1000);
                $(this).addClass('open');
            }         
        })
}
);

CSS：

.registers {
width:33px;
height:136px;
background-repeat:no-repeat;
float:left;
z-index:50;
}

.registers-content {
height:136px;
width:200px;
background-repeat:repeat-x;
background-color:red;
float:left;
z-index:50;
}

.registers-wrapper {
  position:fixed;
  left:100%;
  z-index:50;
    margin-left:-33px;
    width:233px;
}



.videohilfe-wrapper {
top:160px;
}
.videohilfe {
background-color:green;
}
.videohilfe-content {
}

现在它可以正常工作了。

Answer 2

我对Javascript和CSS做了一些修改。以下是更改

Javascript：

$(document).ready(
    function(){
        $('.videohilfe').click(function(){
               if($('.videohilfe-wrapper').css('right') == '-200px')
                    $('.videohilfe-wrapper').animate({right:'0px'});
               else
                    $('.videohilfe-wrapper').animate({right:'-200px'});
            });
        }
    );

CSS：

.registers-wrapper {
  position:fixed;
  right:-200px;  /* changed */
  z-index:50;
}