Jump to content

Подключить эффекты .fadeIn() и .fadeOut()

bibo

By bibo,
in Goods and Services

 Share

Recommended Posts

bibo Explorer

bibo

Posted
Posted

Помогите пожалуйста прикрутить эффекты .fadeIn() и .fadeOut(), вот к этому скрипту(другие, в моем случае просто не работают, а эффект нужен), впрочем не откажусь от других вариантов с применением "visibility".

<script>
function showhideBlock(idclick,idtext){
  var objclick = document.getElementById(idclick);
  var objtext  = document.getElementById(idtext);

 if(objtext.style.visibility=='hidden') {
	objclick.innerHTML=objclick.innerHTML.replace("Show","Hide");	   
	objtext.style.visibility='visible';
	}
 else { 
   objclick.innerHTML=objclick.innerHTML.replace("Hide","Show");
   objtext.style.visibility='hidden';	 
   }
}
</script>

Link to comment
Share on other sites
bibo Explorer

bibo

Posted
  • Author
Posted

Вот собственно сам пример HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test jQuery</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
function showhideBlock(idclick,idtext){
  var objclick = document.getElementById(idclick);
  var objtext  = document.getElementById(idtext);

 if(objtext.style.visibility=='hidden') {
	objclick.innerHTML=objclick.innerHTML.replace("DIV On","DIV Off");	   
	objtext.style.visibility='visible';
	}
 else { 
   objclick.innerHTML=objclick.innerHTML.replace("DIV Off","DIV On");
   objtext.style.visibility='hidden';	 
   }
}
</script>
</head>

<body>

<a href="#" id="switch" onclick="showhideBlock('switch','hide');">DIV On</a>

<div id="hide" style="visibility: hidden;">
   <div style="height:40px; width:200px; background:#FC0;"></div>
</div>

</body>
</html>

Link to comment
Share on other sites
mishka Explorer

mishka

Posted
Posted

Я это вижу как-то так

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test jQuery</title>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		initOpenClose();
	});

	function initOpenClose(){
		var _holder = $('.fade-holder'),
			_openerTextActive = 'DIV on',
			_openerTextDisabled = 'DIV off',
			fadeSpeed = 200;

		_holder.each(function(){
			var _this = $(this),
				_opener = $('.opener', _this),
				_slide = $('.fade-box', _this);

			if(!_opener.is('.active')){
				_slide.hide();
				_opener.text(_openerTextDisabled);
			} else {
				_opener.text(_openerTextActive);
			}
			_opener.click(function(){
				if (_slide.is(':hidden') && !_slide.is(':animated')){
					_slide.fadeIn(fadeSpeed);
					$(this).addClass('active').text(_openerTextActive);
				} else if (!_slide.is(':animated')) {
					_slide.fadeOut(fadeSpeed);
					$(this).removeClass('active').text(_openerTextDisabled)
				}
				return false;
			});
		});
	}
</script>
</head>

<body>
	<ul>
		<li class="fade-holder">
			<a class="opener active" href="#">DIV</a>
			<div class="fade-box">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti...</p>
			</div>
		</li>
		<li class="fade-holder">
			<a class="opener" href="#">DIV</a>
			<div class="fade-box">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti...</p>
			</div>
		</li>
		<li class="fade-holder">
			<a class="opener" href="#">DIV</a>
			<div class="fade-box">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et risus non arcu porttitor feugi at in at neque. In hac habitasse platea dictumst. Proin pretium neque at turpis fermentum de aliquet. Ut risus nisi, scelerisque in convallis et, volutpat malesuada elit. Ut nulla libero, condi entum eget scelerisque eget, blandit sit amet metus. Suspendisse potenti...</p>
			</div>
		</li>
	</ul>
</body>
</html>

Link to comment
Share on other sites
  • 2 months later...
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept