JQuery fadeout of item, item не появляется

Question

У меня есть моя главная страница, содержащая DIV, которая в свою очередь содержит IFRAME. Когда пользователь нажимает кнопку OK в IFRAME, я вызываю функцию на родительской странице, которая исчезает из div с помощью команды JQuery fadeOut. Когда я пытаюсь снова затушить DIV, это не так. Что я делаю не так?

ОСНОВНЫЕ РНР СТР:

<div id="regcontainer"> 
    <iframe id="registration" src="register.html" frameborder="0" allowtransparency="true" scrolling="auto"></iframe> 
</div> 

Jquery КОМАНДЫ В JS файл включен на главной странице, ЧТО приглушить DIV:

var closeIFrame = function() { 
    $('#regcontainer').fadeOut("fast"); 
} 

Fade In:

$('#register').click(function() { $('#regcontainer').fadeIn("fast"); }); 

Answer 1

Вы должны использовать метод fadeIn. http://api.jquery.com/fadeIn/

var showIFrame = function() { 
    $('#regcontainer').fadeIn("fast"); 
} 

Answer 2

Вы должны использовать fadeToggle(), чтобы сделать ваш div переключить его состояние. Также я думаю, вы можете использовать fadeIn() тоже, но так как вы хотите сделать, чтобы ваш div появился и исчез сразу, fadeToggle() - лучший выбор.

http://api.jquery.com/category/effects/fading/ это должно предоставить всю информацию вам нужно

Answer 3

Может быть что-то вроде этого, вот Fiddle

<a href="#" class="register-open">Register</a> 

<div id="regcontainer"> 
    <iframe id="registration" src="http://fiddle.jshell.net/user/login/" frameborder="0" allowtransparency="true" scrolling="auto"> 
    </iframe> 
    <a href="#" class="register-close">Close</a> 
</div> 


$(function() { 

    $('.register-open').click(function() { 
    $('#regcontainer').slideToggle(450); 
    }); 
    $('.register-close').click(function() { 
    $('#regcontainer').slideToggle(450); 
    }); 

}); 

Answer 4

Вы не можете использовать fadeToggle(), если кнопка ОК находится внутри DIV, который выведении , так как вы не можете нажать его потом.

Я считаю, что вы ищете что-то вроде этого:

HTML

<div id="regcontainer"> 
    <div class="button"></div> 
</div> 
<div class="button2"></div> 

JQuery

$('.button').on('click', function() { 
    $('#regcontainer').fadeOut('fast'); 
}) 

$('.button2').on('click', function() { 
    $('#regcontainer').fadeIn('fast'); 
}) 

JSFiddle