如何在此javascript上添加淡入淡出效果

我只想知道如何在此javascript代碼開關上添加淡入淡出效果。如何在此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效果）來使用切換。任何人都可以幫助我嗎？：）謝謝！

來源

2016-01-15 dr aka Madalin

有一個在vanilla-js

衰落的元件的一個片段轉載如下：比起jQuery的版本

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

：

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

<div id="thing" style="height: 200px; width: 200px; background: red"></div>

來源

2016-01-15 00:05:54 joaumg

對不起，但你的第一個代碼不工作..我只需要修改我的代碼與淡出效果... –

更新與小提琴... – joaumg

是的，這是好的，但我希望這與我的代碼完成（我因爲當我點擊我的觸發按鈕時，我想切換我的元素... –

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

來源

2016-01-15 00:31:06

這個工作褪色效果我的意思是..但是當我點擊按鈕觸發，他先隱藏並顯示我的元素。 –

你會分享一些更多的代碼，你觸發的行動。因此，我可以進一步幫助您... –

當您觸發按鈕時，您可以使用JQuery的.fadeToggle（）函數，並且可以根據您的要求用此替換我的fadeIn（）。請看看這個，如何使用它：http://api.jquery.com/fadetoggle/ –

所以。 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.

當我切換按鈕，我想我的內容隱藏/顯示淡入效果點擊。

來源

2016-01-15 00:54:38

如何在此javascript上添加淡入淡出效果

回答

相關問題