如何在这个javascript上添加淡入淡出效果答案

【问题标题】：How to add fade effect on this javascript如何在这个javascript上添加淡入淡出效果
【发布时间】：2016-04-20 12:25:18
【问题描述】：

我只想知道如何在这个 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;
}
//]]>

此代码适用于 cookie，我想添加淡入淡出效果（如 jquery 效果）以使用切换。有人可以帮我吗？ :) 谢谢！

【问题讨论】：

标签： javascript fade effect

【解决方案1】：

在vanilla-js处有一个元素淡化的sn-p

转载如下：

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

对比jQuery版本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#thing').fadeOut();
</script>

添加小提琴：

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'))

&lt;div id="thing" style="height: 200px; width: 200px; background: red"&gt;&lt;/div&gt;

【讨论】：

很抱歉，您的第一个代码不起作用..我只需要修改我的代码以具有淡入淡出效果...
是的，这没关系，但我希望我的代码完整（我的意思是我想保留我的代码）.. 因为当我点击我的触发按钮时，我想切换我的元素.. .
在setCookie(id, displayValue, 30);之后或之前你可以调用fadeElement(obj)，它会隐藏元素，你只需要复制上面fiddle的fadeElement函数和你的代码。跨度>

【解决方案2】：

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;
    });
}

【讨论】：

我的意思是这个工作淡化效果.. 但是当我点击按钮触发时，他首先隐藏并显示我的元素。
你会分享更多触发动作的代码吗？所以，我可以进一步帮助你......
你可以在触发按钮时使用JQuery的.fadeToggle()函数，你可以根据你的需要用这个替换我的fadeIn()。请看这个，如何使用它：api.jquery.com/fadetoggle
我不能这样做..我觉得我太菜鸟了..如果有人能帮我解决这个问题，我将不胜感激..我放弃了。
如果您需要描述性好的帮助，请您分享更多代码。

【解决方案3】：

所以。 1.我有这个主题的第一个代码。 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>

用于切换，以及我的内容 X。

当我点击切换按钮时，我希望我的内容以淡入淡出效果隐藏/显示。

【讨论】：