Javascript: Élément de fondu de l'opacité specidied à l'opacité spécifiée?

J'essaye de trouver une fonction qui peut fondre un élément d'une transparence spécifiée à une transparence spécifiée. Par exemple de 0 à .7 mais tout ce que je peux trouver se fane soit de 0 à 1 soit de 1 à 0. Je ne trouve rien qui permette de spécifier quoi faire. Mes tentatives d'ingénierie inverse des fonctions que j'ai trouvées ont également échoué car chaque exemple que j'ai trouvé a été assez énigmatique.Javascript: Élément de fondu de l'opacité specidied à l'opacité spécifiée?

Aussi je veux faire cela sans aucun cadre.

Merci!

Source

2010-01-13 JD Isaacks

Avez-vous regardé la source de jQuery.animate et jQuery.fadeTo? – prodigitalson

Il n'y a pas de truc particulier, vous venez de définir le style d'opacité à quelque chose autre que 0 ou 1 à plusieurs reprises dans un délai d'attente/intervalle.

Voici une fonction de fondu dépouillée que vous pouvez utiliser comme point de départ.

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

Source

2010-01-13 22:52:18 bobince

Toutes les bibliothèques d'effets des frameworks comme JQuery ou Prototype permettent de passer de et à des valeurs arbitraires.

En JQuery: FadeTo
Dans Prototype: Fade avec l'argument to:

Edit: Désolé, j'overread que vous ne voulez pas utiliser les cadres. Mais ils devraient au moins vous donner une idée de comment le faire. De plus, il devrait être facile de modifier n'importe quelle fonction d'évanouissement pour passer de x à y au lieu de 0 à 1 - Il suffit d'ajuster les valeurs cibles de 0 ou 1 à quelque chose entre les deux.

Source

2010-01-13 21:54:56

Utilisez le code de cet exemple:

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

Source

2010-01-13 21:57:31 alemjerus

Quel code étrange ... À quoi sert de taguer * chaque élément DOM * avec sourceIndex? – Shog9

Javascript: Élément de fondu de l'opacité specidied à l'opacité spécifiée?

Répondre

Questions connexes