Tag: fadein

Fade-in Fade-out doesn’t work in WordPress

I have back-to-top script with an arrow icon which appears when scrolling down and disappears when the page content is on top. Works perfect, but when I insert the script in WordPress the scrollTop part of the script works but not the fade-in and fade-out effect.

Any solution?

jQuery('body').prepend('<a href="#" class="back-to-top">Back to Top</a>'); var amountScrolled = 300; $  (window).scroll(function() {     if ( $  (window).scrollTop() > amountScrolled ) {         $  ('a.back-to-top').fadeIn('slow');     } else {         $  ('a.back-to-top').fadeOut('slow');     } });  $  ('a.back-to-top, a.simple-back-to-top').click(function() {     $  ('html, body').animate({         scrollTop: 0     }, 700);     return false; }); 
body {background:#FEF1D4; height:1000px}  .back-to-top {     display: none;     width: 4.75rem;     height: 4.75rem;     text-indent: -9999px;     position: fixed;     z-index: 1500;     left: 0.5rem;     bottom: 1rem;     background: url(https://static.thenounproject.com/png/1920879-200.png) no-repeat center 43%;     background-size: contain; } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Expected result → jsfiddle

WordPress result ↓

enter image description here

Animacion con Jquery, un fadeIn, un animate con desplazamiento a la derecha y demas

Tengo que diseñar una animacion con jquery con los elementos fadeIn Y animate. Muestro codigo para ser mas concreto. Bueno, el asunto es este: Debo de sobreponer o ocultar las 3 imagenes siguientes del welcome y alinearlas una tras otra con animacion, se me ocurrio dos formas con un animate y que se mueva a la derecha por porcentaje o pixeles y la segunda es dandole un contenedor a donde desplazarse, pero este tipo de animacion no lo encuentro en la web. Adicional a eso como se utiliza el width con corchetes.

Codigo de HTML:

<!DOCTYPE html> <html lang="es" dir="ltr">   <head>     <meta charset="utf-8">     <!--BOOTSTRAP CSS LIBRARY-->     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">     <!--BOOTSTRAP CSS LIBRARY-->     <link rel="stylesheet" href="css/estilos.css">     <title>Animacion de Entrada Grupo Empresarial SKY</title>   </head>   <body>     <div class="container-fluid fondo">       <div class="row">         <div class="col-lg-3 col-md-3 col-sm-3 tableroEncabezado">          </div>       </div>       <div class="row">         <div class="col-lg-3 col-md-3 col-sm-3 tableroLogo">          </div>         <div class="col-lg-3 col-md-3 col-sm-3 tableroFirma">          </div>         <div class="col-lg-3 col-md-3 col-sm-3 tableroEscuela">          </div>       </div>     </div>     <!--IMAGENES     <img src="img/1.jpg" alt="imagen-bienvenido" id="bienvenido" class="bienvenido-css">     <img src="img/2.png" alt="imagen-logo" id="logo" class="logo-css">     <img src="img/3.jpg" alt="imagen-firma" id="firma" class="firma-css">     <img src="img/4.png" alt="imagen-academia" id="escuela" class="escuela-css">     -->     <!--IMAGENES-->     <!--BOOTSTRAP JS LIBRARY-->     <script   src="https://code.jquery.com/jquery-1.9.1.min.js"   integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="   crossorigin="anonymous"></script>     <!--BOOTSTRAP JS LIBRARY-->     <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>     <script src="js/app2.js" type="text/javascript"></script>     <!--<script src="js/app.js"></script>-->   </body> </html>

Codigo de CSS:

.fondo{background-color: white;} .logo-css{width: 260px;height: 260px; position: relative;} .firma-css{position: relative;width: 260px;height: 260px;} .escuela-css{position: relative;width: 260px;height: 260px;} .bienvenido-css{position: relative;}

Codigo de JS:

$  (function(){   imagenAnimacion(); })  function imagenAnimacion(){   var welcome= $  ("<img src='img/1.jpg' alt='imagen-bienvenido' id='bienvenido' class='bienvenido-css' style='display:none;'>");   var logo= $  ("<img src='img/2.png' alt='imagen-logo' id='logo' class='logo-css' style='display:none;'>");   var signal= $  ("<img src='img/3.jpg' alt='imagen-firma' id='firma' class='firma-css' style='display:none;'>");   var school= $  ("<img src='img/4.png' alt='imagen-escuela' id='escuela' class='escuela-css' style='display:none;'>");   $  (".tableroEscuela").append(welcome);   welcome.fadeIn(2000, function(){     welcome.animate({       "right":"+=150%"       },"fast");       $  (".tableroEscuela").append(logo);       logo.fadeIn(2000, function(){         logo.animate({           "right":"+=200%"         },"fast");       $  (".tableroEscuela").append(signal);       signal.fadeIn(2000, function(){         logo.animate({           "right":"+=150%"           },"fast");       $  (".tableroEscuela").append(school);       school.fadeIn(2000, function(){         school.animate({           "right":"+=100%"         },"fast");           });         });       });     }); }

Disable ringtone fade-in

My Moto Z2 Play includes a “feature” where call rings and alarm sounds start out nearly silent and increase to full volume over about five seconds. I have been unable to find any setting to change this behavior. Media audio (games, apps, etc.) is not affected.

I have found an app that purportedly solves this problem, but it requires an unsettling number of permissions to function. Is there no native way to disable this “feature”?

(I understand that this behavior provides utility for some people. For me, it merely ruins my ringtones and makes me more likely to miss calls.)