JQuery Iframe Link Fade In - FadeOut

Проблема, с которой я столкнулся, - в скрипке. Когда я нажимаю ссылку "О", iframe исчезает с текстом (текст находится в файле about-me.html, который я не знаю, как включать в скрипт и его просто текст заголовка h1 с абзацем ниже), но когда я нажимаю ссылку "Портфолио", текст из портфолио-me.html появляется только в iframe, и он не исчезает. Я бы хотел, чтобы iframe исчезал с текстом, когда я нажимаю ссылку "О программе", и когда Я нажимаю ссылку "Портфолио". Я хочу, чтобы iframe (и текст "About" в about-me.html) исчезал и исчезал в iframe с помощью портфолио-me.html и т.д. Для других ссылок. Не могли бы вы решить эту проблему для меня, объяснить ее и включить другие решения для этой проблемы и объяснить их? Я начинаю в jquery, и я попытался решить эту проблему, добавив данные и разгружая материал, но это не сработало. Заранее спасибо!

$(document).ready(function () {
 $(".about").on("click",function(){
 $('iframe').load(function() {
 $('#iframeContainer').fadeIn(1000);
 });
 });

 $(".about").on("click",".portfolio",function(){
 $("iframe").load(function(){
 $("iframeContainer").fadeOut(1000);
 });
 });
});

http://jsfiddle.net/VA6Hr/

1 ответ

Это должно сработать для вас. Заметьте, что я изменил биты HTML и CSS, чтобы улучшить код.

HTML:

<ul>
 <li><a href="about-me.html" target="_blank">About</a></li>
 <li><a href="portfolio-me.html" target="_blank">Portfolio</a></li>
 <li><a href="blog-me.html" target="_blank">Blog</a></li>
 <li><a href="contact-me.html" target="_blank">Contact</a></li>
</ul>

<div id="iframeContainer">
 
</div>

CSS:

#iframeContainer { display: none; }

iframe {
 margin-left:100px;
 width:300px; height:300px;
 border: 1px solid #000; }

JQuery:

$(document).ready(function () {
 $('ul.bmenu a').click(function(){
 var iframeSrc = $(this).attr('href');
 $('#iframeContainer').fadeOut(1000,function(){
 $('#iframeContainer iframe').attr('src',iframeSrc);
 $('#iframeContainer').fadeIn(1000);
 });
 return false;
 });
});

Скрипт: http://jsfiddle.net/VA6Hr/1/

Этот код использует ссылку hrefs как src для iframe.

licensed under cc by-sa 3.0 with attribution.