How to change the opacity on an element dynamically using javascript -

-

i made function change opacity of element, know not working, following code:

   function _opacity(ele, opacity,addopac , delay ){     ele = document.getelementbyid(ele);     var currentopacity = ele.style.opacity,         changeinopacity = setinterval(function(){             if (currentopacity > opacity ) { decrease();};             if (currentopacity < opacity) { increase();};             if (currentopacity == opacity) { stopinc();};              }, delay),          increase = function(){             ele.style.opacity = currentopacity;             currentopacity = currentopacity+addopac;         },          decrease =function(){             ele.style.opacity = currentopacity;             currentopacity = currentopacity-addopac;          },         stopinc = function(){             clearinterval(changeinopacity);         }; }

one of foremost feature of function is doesn't uses loop.

this ideology of using setinterval works in changing width , height of element. here function not functioning.

what know is not adding style attribute element passed above function

what mistake here because of not working?

thanks in advance.

there few problems there:

  1. to current opacity of element, need use getcomputedstyle function (or currentstyle property on oldie), not .style.opacity. latter has value if it's been assigned explicitly, rather implicitly through style sheets.

  2. the value string, need convert number.

  3. it's unlikely you'll exactly match target opaccity, need stop when cross target.

  4. you don't put ; @ end of if statements, remove those.

  5. you assign opacity, increment it, , later incremented value check see if you're done, if weren't #3, you'd stop early.

  6. in javascript, overwhelming convention start local variable names lower-case letter. changed name of timer handle timer.

your best bet figure out direction you're going, stop when pass target:

// polyfill getcomputedstyle old ie  if (!window.getcomputedstyle) {    window.getcomputedstyle = function(element) {      return element.currentstyle;    }  }    // _opacity function  function _opacity(ele, opacity, addopac, delay) {    var direction;    ele = document.getelementbyid(ele);        // determine direction    direction = +getcomputedstyle(ele).opacity < opacity ? 1 : -1;    var timer = setinterval(function() {      // *computed* opacity      var current = +getcomputedstyle(ele).opacity;      if (direction > 0) {        if (current < opacity) {          increase(current);        } else {          stopinc();        }      }      else {        if (current > opacity) {          decrease(current);        } else {          stopinc();        }      }      }, delay),      increase = function(current) {      // increase, don't go past target      ele.style.opacity = math.min(current + addopac, opacity);    },      decrease = function(current) {                // decrease, don't go past target      ele.style.opacity = math.max(current - addopac, opacity);      },    stopinc = function() {      clearinterval(timer);    };  };    // run  _opacity("target", 0.3, 0.05, 50);
<!-- script provides `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->  <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>  <div id="target">this element</div>


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more