Use jQuery’s fadeTo() and then have a callback set the visibility. Example: $(‘#fade’).on(“click”, function(){ $(this).fadeTo(500, 0, function(){ $(this).css(“visibility”, “hidden”) }) // duration, opacity, callback }) <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script> <a href=”#” id=”fade”>Click to Fade</a> <div>This won’t move</div>
Answer for 2020: This effect can now be achieved with true alpha transparency, without the need to cover the bottom with an additional <div>. Simply use the CSS mask-image property with a linear gradient that fades from black to transparent. The browser should take care of the rest for you. Demo: .container { -webkit-mask-image: linear-gradient(to … Read more
Use css @keyframes .elementToFadeInAndOut { opacity: 1; animation: fade 2s linear; } @keyframes fade { 0%,100% { opacity: 0 } 50% { opacity: 1 } } here is a DEMO .elementToFadeInAndOut { width:200px; height: 200px; background: red; -webkit-animation: fadeinout 4s linear forwards; animation: fadeinout 4s linear forwards; } @-webkit-keyframes fadeinout { 0%,100% { opacity: 0; … Read more
Initially when there’s no opacity set, the value will be an empty string, which will cause your arithmetic to fail. That is, “” < 0.1 == true and your code goes into the clearInterval branch. You can default it to 1 and it will work. function fadeOutEffect() { var fadeTarget = document.getElementById(“target”); var fadeEffect = … Read more
I wanted to achieve the same goal as you, so I wrote the following method which does exactly that if you pass it an ImageView and a list of references to image drawables. ImageView demoImage = (ImageView) findViewById(R.id.DemoImage); int imagesToShow[] = { R.drawable.image1, R.drawable.image2,R.drawable.image3 }; animate(demoImage, imagesToShow, 0,false); private void animate(final ImageView imageView, final int … Read more