[removed] Fade element from specidied opacity to s

I am trying to find a function that can fade an element from a specified transparency to a specified transparency. For example from 0 to .7 but everything I can find just fades either from 0 to 1 or 1 to 0. I can't find anything that lets you specify from what to what. My attempts of reverse engineering the functions I have found have also failed as every example I have found has been pretty cryptic.

Also I want to do this WITHOUT any frameworks.

Thanks!!

标签： javascript transparency fade no-framework

3条回答

forever°为你锁心

2楼-- · 2019-01-29 11:11

All the frameworks' effect libraries like JQuery or Prototype allow fading from and to arbitrary values.

In JQuery: FadeTo
In Prototype: Fade with the to: argument

Edit: Sorry, I overread that you don't want to use any frameworks. But they should at least give you an idea how to do it. Also, it should be easy to tweak any fading function to go from x to y instead of 0 to 1 - You'd just need to adjust the target values of 0 or 1 to something in between.

0人赞添加讨论(0) 举报

爷的心禁止访问

3楼-- · 2019-01-29 11:28

There is no particular trick to it, you just set the opacity style to something other than 0 or 1 repeatedly in a timeout/interval.

Here's a stripped down fade function you can use as a starting point.

<script type="text/javascript">
    function fade(element, o0, o1, t) {
        // IE compatibility. Detect lack of native 'opacity' support, and ensure element
        // has layout for IE6-7.
        //
        var canopaque= 'opacity' in element.style;
        if (!canopaque && 'currentStyle' in element && element.currentStyle.hasLayout===false)
            element.style.zoom= '1';

        function setOpacity(o) {
            if (canopaque)
                element.style.opacity= ''+o;
            else
                element.style.filter= 'alpha(opacity='+Math.round(o*100)+')';
        }

        var t0= new Date().getTime();
        setOpacity(o0);
        var interval= setInterval(function() {
            var dt= (new Date().getTime()-t0)/t;
            if (dt>=1) {
                dt= 1;
                clearInterval(interval);
            }
            setOpacity(o1*dt+o0*(1-dt));
        }, 25);
    }
</script>
<p id="foo"> hello. </p>
<button onclick="fade(document.getElementById('foo'), 0.7, 0, 2000);">fade 0.7 to 0</button>

0人赞添加讨论(0) 举报

Deceive 欺骗

4楼-- · 2019-01-29 11:28

Use code from this example:

<html>
<head>
<title> </title>
    <script>
var nereidFadeObjects = new Object();
var nereidFadeTimers = new Object();
var opacitiz=0;  

//Функция предназначена для нумерации тегов
window.onload=function() {
  var e=document.getElementsByTagName('*')
  for (var i=0,l=e.length;i<l;i++) e[i].sourceIndex=i
}

//Вызов nereidFade() для разных браузеров при наведение и отводе курсора мышкой
            //@param object определяет из какого тега был вызов
//@param num -- 1  - навели курсов мышкой, 0 - отвели курсор мышки                        
function KrossBrows(object,num) {
        if (num==1) 
                if (!document.all) nereidFade(object, 1,30,0.1);
                else nereidFade(object, 100,30,10);
        else
                if (!document.all) nereidFade(object, 0.3,50,0.05);
                else nereidFade(object, 30,50,5);
}

//Отвечает за прозрачнность 
//@param object определяет из какого тега был вызов
//@param destOp конечная позиция для выполнения прозрачности
    //@param rate время которое потребуется на вызов функции
//@param delta шаг для прозрачности
function nereidFade(object, destOp, rate, delta){
        if (!document.all) opacitiz=object.style.opacity;
        else opacitiz=object.filters.alpha.opacity;

        clearTimeout(nereidFadeTimers[object.sourceIndex]);
        diff = destOp-opacitiz;
        direction = 1;
        if (opacitiz > destOp) direction = -1;

                delta=Math.min(direction*diff,delta);
        if (!document.all)                 object.style.opacity=parseFloat(object.style.opacity)+(direction*delta);
        else object.filters.alpha.opacity+=direction*delta;

    if (opacitiz != destOp){
            nereidFadeObjects[object.sourceIndex]=object;
                nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }
}
</script>
</head>
<body>
<IMG onmouseover="KrossBrows(this,1)" style="FILTER: alpha(opacity=30);opacity:0.3"     onmouseout="KrossBrows(this,0)" height=31 alt="" src="ace.gif" width=88 vspace=2     border=0></A>
<IMG onmouseover="KrossBrows(this,1)" style="FILTER: alpha(opacity=30);opacity:0.3"     onmouseout="KrossBrows(this,0)" height=31 alt="" src="ace.gif" width=88 vspace=2     border=0></A>
</body>
            </html>

0人赞添加讨论(0) 举报

[removed] Fade element from specidied opacity to s

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间