исчезают в некоторой области и исчезают в другом

Question

У меня есть форма входа в систему и ссылка с названием «Регистрация» под формой. . Я хочу, чтобы, когда пользователь нажимает на ссылке «Регистрация», то Войти затухать и зарегистрировать форму фейдер Я использовал следующий сценарий к этому:

$("#loginArea").fadeOut(2000, function() { 
         $("#RegisterArea").fadeIn(2000, function() { 
         $("#RegisterArea").empty().append(mydata); }); 
         //$("#RegisterArea").empty(). 
        }); 

используя код выше, форма Войти исчезает, но исчезает in для regsiter form не работает и просто помещает контент «mydata» в «RegisterArea» без анимации.

Вы можете мне помочь?

Answer 1

Я думаю, что вы можете сделать это:

$("#loginArea").fadeOut(2000, function() { 
    $("#RegisterArea").empty().hide().append(mydata); 
    $("#RegisterArea").fadeIn(2000); 
}); 

Если область Регистрация пуст, пока выцветания вас не увидит, поэтому сначала наполнить его содержанием, а затем исчезают его :)

Answer 2

Кажется, что это работает для меня. Смотрите эту демо:

• http://jsfiddle.net/UDdZ9/

Возможно ли это, что вы не делаете ваш #RegisterArea изначально скрыты? Или те идентификаторы, которые вы используете для выбора ваших объектов, неверны (что они не соответствуют базовому HTML)? Я столкнулся с этими проблемами, пока демоверсия работала правильно.

Чтобы скрыть свой #RegisterArea, вы можете использовать the jQuery .hide method, или вы можете установить его стиль в CSS на display:none.

Если это не поможет, попробуйте запустить это в chrome, откройте консоль сценария и проверьте, не возникают ли ошибки на вашей странице. Чтобы открыть консоль сценария, F12, затем нажмите кнопку Show Console в нижнем левом углу окна.

Вот рабочий код из той демонстрации, которую я сделал с вашим кодом.

HTML:

<div id="loginArea"> 
    <a id="register">Click me to register</a> 
</div> 
<div id="RegisterArea"> 
</div> 

CSS:

#loginArea { 
    background:grey; 
} 

#RegisterArea { 
    width:50px; 
    height:50px; 
    background:green; 
    display:none; 
} 

JS:...

$("#register").click(function() { 
    $("#loginArea").fadeOut(2000, function() { 
     $("#RegisterArea").fadeIn(2000, function() { 
      var mydata = "test123"; 
      $("#RegisterArea").empty().append(mydata); 
     }); 
    }); 
});