Is It Better to Use Jquery Fadein or CSS3 Animations

Is it better to use jQuery fadeIn or CSS3 animations?

How about one with a fallback to the other? Use CSS3 transitions where possible, and use a feature detection library such as Modernizr to determine if the user's browser is capable of CSS3 transitions.

If AND ONLY IF the user's browser does not support native animations, only then should you use jQuery.

Native animations are GPU accelerated, resulting in less constraint on the CPU, and much smoother animations. Also, IT DOESN'T REQUIRE JAVASCRIPT nor does it take extra requests to pull off.

CSS3 replacement for jQuery.fadeIn and fadeOut

I have managed to fix this by doing something that feels unnatural and hacky:

function fadeIn (elem, fn) {
  var $elem = $(elem);

  $elem.addClass('is-animating');
  $elem.removeClass('is-hidden');

  // Smelly, setTimeout fix
  setTimeout(function () {
    $elem.removeClass('is-hiding');
  }, 0);

  $elem.on(transitionEndEvent, function () {

    $elem.removeClass('is-animating');

    if (typeof fn === 'function') {
      fn(); 
    }
  });
}; 

Adding the setTimeout function to the class that contains the transition-able property fixes the issue.

Working code here: Codepen fixed code

CSS Transition equivalent to jQuery fadeIn(), fadeOut(), fadeTo()

I've written loads about this (http://css3.bradshawenterprises.com) , but in short, you just add the transitions properties, then change the property.

So, instead of $('#header_text1').fadeOut(250);, you'd use in your CSS:

-webkit-transition: opacity 250ms ease-in-out;
-moz-transition: opacity 250ms ease-in-out;
-o-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;

, then in your JS,

$('#header_text1').css({'opacity', 0});

If you want to run something when an animation has happened, there are events for transitionEnd that fire.

It's quite a different approach, but people have tried to bridge between JS and CSS in a few ways:

http://playground.benbarnett.net/jquery-animate-enhanced/ is a good link for this.

jQuery fadein fadeout effects in css

The display:none; will remove the block abruptly, so you might want to animate the height as well.

Below is an example of the CSS transition:

$(function() {    $(".toggle-fade").click(function() {        $(".block").toggleClass('hidden');    });});

.block {    background:red;    height:300px;    width:300px;    visibility:visible;    opacity:1;    transition:2s;    -webkit-transition:2s;    transition-delay:1s;    -webkit-transition-delay:1s;}.block.hidden {    visibility:hidden;    height:0px;    opacity:0;    overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="block">    </div><button class="toggle-fade">Toggle block</button>

Can jQuery's fadeIn and fadeOut be tweeked to use CSS transitions?

This is the best fadeIn/fadeOut using CSS3 transitions I've coded. It supports all of their signatures. So far, no bugs found. Feel free to reuse

var hasCSSTransitions = Modernizr.csstransitions;

hasCSSTransitions && (function ($) {
    $.fn.fadeIn = function (speed, easing, callback) {
        return this.filter(function (i, elem) {
                        return $.css(elem, 'display') === 'none' || !$.contains(elem.ownerDocument, elem);
                    })
                    .css('opacity', 0)
                    .show()
                    .end()
                .transition({
                    opacity: 1
                }, speed, easing, callback);
    };

    $.fn.fadeOut = function (speed, easing, callback) {
        var newCallback = function () {
            $(this).hide();
        };

        // Account for `.fadeOut(callback)`.
        if (typeof speed === 'function') {
            callback = speed;
            speed = undefined;
        }

        // Account for `.fadeOut(options)`.
        if (typeof speed === 'object' && typeof speed.complete === 'function') {
            callback = speed.complete;
            delete speed.complete;
        }

        // Account for `.fadeOut(duration, callback)`.
        if (typeof easing === 'function') {
          callback = easing;
          easing = undefined;
        }

        if (typeof callback === 'function') {
            newCallback = function () {
                $(this).hide();
                callback.apply(this, arguments);
            };
        }

        return this.transition({
            opacity: 0
        }, speed, easing, newCallback);
    };
}(jQuery));

This requires jQuery Transit plugin from Rico. It's just a wrapper with a similar signature than animate() but for using css3.

FadeIn animation using CSS3 in Javascript

Found the cause here: CSS transitions do not work when assigned trough JavaScript

To give this attention I need to give the browser some time - or better: a working slot to activate the transition as the time seems not to be a problem.

The following code cuts the process in two by using setTimeout()... and it works!

var div = $('div');

// first process
div
  .css('opacity', 0) // initial opacity
  .css('display', 'block') // make it appear (but still transparent)
  .css('transition', 'opacity 1s linear'); // set up a transition for opacity

// break - start the transition in a new "thread" by using setTimeout()
window.setTimeout(function(){
    div.css('opacity', 1); // start fade in
}, 1); // on my desktop browser only 1ms is enough but this 
       // may depend on the device performance
       // maybe we need a bigger timeout on mobile devices

How do you fadeIn and animate at the same time?

$('.tooltip').animate({ opacity: 1, top: "-10px" }, 'slow');

However, this doesn't appear to work on display: none elements (as fadeIn does). So, you might need to put this beforehand:

$('.tooltip').css('display', 'block');
$('.tooltip').animate({ opacity: 0 }, 0);

how to achieve *SMOOTH* fade in and out animation on mobile with jquery and css3?

You should always try and use CSS3 transitions, instead of jQuery animations. Here I use a CSS3 transition to fade out the .square, and then I wait until the transition has ended to set the display to none.

If you animate an element in jQuery, for example, using fadeOut, you'll see what happens. It basically sets the opacity to 1, and then brings that value down to 0 in tiny increments. This is very inefficient. So it's better to always use CSS3 transitions and animations wherever possible.

Fade out: https://jsfiddle.net/danhaswings/znLL0ws5/1/

Fade in: https://jsfiddle.net/danhaswings/kjgmxa8x/

HTML

<div class="square"></div>

CSS

.square {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: opacity 1s ease-in-out;
}

jQuery

var $square = $('.square');

$square.css('opacity', '0');

$square.one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function() {
    $(this).css('display', 'none');
});

---

Related Topics