[英]How to add fade effect on this javascript
i want just to know how to add fade effect on this javascript code toggle. 我只想知道如何在此javascript代码切换上添加淡入淡出效果。
//<![CDATA[
function toggleList(id, displayValue) {
var obj = document.getElementById(id);
if(!displayValue)
{
var displayValue = (obj.style.display!='none')?'none':'block';
}
obj.style.display = displayValue;
setCookie(id, displayValue, 30);
return;
}
window.onload = function()
{
toggleList('sidebar_block_content', getCookie('sidebar_block_content'));
return;
}
function setCookie(name, value, expiredays)
{
if (expiredays==null) { expiredays=0; }
var expireDate = new Date();
expireDate.setDate(expireDate.getDate()+expiredays);
var cookieVal = name + '=' +escape(value) + ';expires=' + expireDate.toGMTString();
document.cookie = cookieVal;
return;
}
function getCookie(searchName)
{
if (document.cookie.length>0)
{
var nameValuePair, cookieName, cookieValue
var pairs = document.cookie.split(';');
for(var i=0; i<pairs.length; i++)
{
nameValuePair = pairs[i].split('=');
cookieName = nameValuePair[0].replace(/^\s+|\s+$/g,'');
cookieValue = nameValuePair[1].replace(/^\s+|\s+$/g,'');
if(cookieName == searchName) { return cookieValue; }
}
}
return false;
}
//]]>
This code works on cookies and i want to add a fade effect (like jquery effect) to work with toggle. 这段代码适用于Cookie,我想添加淡入淡出效果(如jquery效果)以使用切换功能。 Can anybody help me with this? 有人可以帮我吗? :) Thank you! :) 谢谢!
There is a snippet of fading an element at vanilla-js 在vanilla-js上有一段使元素褪色的片段
Reproduced below: 转载如下:
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
Compared to the jQuery version: 与jQuery版本相比:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#thing').fadeOut();
</script>
Adding a fiddle: 添加小提琴:
function fadeElement(elem) { var s = elem.style; s.opacity = 1; (function fade(){ (s.opacity-=.1)<0?s.display="none":setTimeout(fade,40) })(); } fadeElement(document.getElementById('thing'))
<div id="thing" style="height: 200px; width: 200px; background: red"></div>
function toggleList(id, displayValue) {
$( "#" + id).fadeIn( "slow", function() {
var obj = document.getElementById(id);
if(!displayValue)
{
var displayValue = (obj.style.display!='none')?'none':'block';
}
obj.style.display = displayValue;
setCookie(id, displayValue, 30);
return;
});
}
So. 所以。 1. I have first code of this subject. 我有这个主题的第一个代码。 2. I have this line: 2.我有这行:
<a href="#" class="toggle_sidebarBody toggle_sdautoHide clickable" title="{L_SD_TOGGLE_SIDEBAR}" onclick="toggleList('sidebar_block_content'); return false;">{L_SD_COLLAPSE_ENTITY}</a>
for toggle, and my content X. 进行切换,然后输入我的内容X。
When i click on toggle button i want my content to hide / show with fade effect. 当我点击切换按钮时,我希望我的内容以淡入淡出的效果隐藏/显示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.