CSS-переход эквивалентен jQuery fadeIn(), fadeOut(), fadeTo()

У меня есть это

$('#button1').click(function(){

    $('#header_bg').fadeTo(15, 0, function()
    {
        document.getElementById('header_bg').style.fill = '#FF0000';
    }).fadeTo('slow', 1);

    $('#header_text1').fadeOut(250);

    $('#header_text2').fadeIn(250);

});

Я пытаюсь улучшить производительность мобильных устройств (на iOS) на тяжелом веб-сайте jQuery. Я читал, что iOS обрабатывает переходы CSS намного лучше, чем jQuery. Какой лучший способ сделать эти iOS дружественными?

Источник

4 ответа

Решение

Я написал много об этом ( http://css3.bradshawenterprises.com/), но вкратце, вы просто добавляете свойства переходов, а затем изменяете свойство.

Итак, вместо $('#header_text1').fadeOut(250);вы бы использовали в своем 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;

тогда в вашем JS,

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

Если вы хотите что-то запустить, когда произошла анимация, есть события для transitionEnd, которые запускаются.

Это совершенно другой подход, но люди пытались соединить JS и CSS несколькими способами:

http://playground.benbarnett.net/jquery-animate-enhanced/ - хорошая ссылка для этого.

Источник

демо попробуйте это

@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.in, .out {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-duration: 705ms;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-duration: 705ms;        
}

.fade.out {
        z-index: 0;
        -webkit-animation-name: fadeout;
        -moz-animation-name: fadeout;
}

.fade.in {
        opacity: 1;
        z-index: 10;
        -webkit-animation-name: fadein;
        -moz-animation-name: fadein;
}
Источник

CSS переходы это то, что вы ищете,

Вот хорошая демонстрация, показывающая эффект исчезновения изображения: http://cssnerd.com/2012/04/03/jquery-like-pure-css3-image-fade-in/

вот некоторый демонстрационный код:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="jquery.js"></script>
        <script>
            $(document).ready(function() {
                var change = true;
                $('#ba').click(function() {
                    if(change) {
                        $('#a').css('opacity', ' 0');
                        $('#b').css('opacity', '1');
                    } else {
                        $('#a').css('opacity', '1');
                        $('#b').css('opacity', '0');
                    }

                    change = !change;

                });
            });
        </script>
        <style>
            .fadeeffect {
                -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;
            }               
        </style>
    </head>
    <body>

        <button type="button" id="ba" >
            Click Me!
        </button>

        <div>
            <p id="a"class="fadeeffect">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p id="b" class="fadeeffect">
                eafdsaf dsa dgsf dgadg dfg dagfadgLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </body>
</html>
Источник

Из ответа Рича Брэдшоу реализация fadeOut в jQuery с обратным вызовом будет выглядеть так:

// This function is an alternative to jquery fadeOut.
// jQuery fadeOut changes opacity gradually, forcing the browser to refresh the page each time.
// Using CSS transitions allows the browser to use GPU to render the page, which is much faster if the DOM is big.
jQuery.fn.fadeOut = function(callback) {
    let $selector = $(this[0]);
    $selector.addClass('fadeOut');
    $selector.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
    function(e){
        $selector.off(e);
        $selector.removeClass('fadeOut');
        $selector.css('display', 'none');
        $selector.css('opacity', 1);     // Revert back opacity since element is not displayed anymore
        if(typeof callback === 'function')
            callback();
    });
    $selector.css('opacity',0);
}

И конечно .fadeOut:

.fadeOut {
    -webkit-transition: opacity 1000ms ease-in-out;
    -moz-transition: opacity 1000ms ease-in-out;
    -o-transition: opacity 1000ms ease-in-out;
    transition: opacity 1000ms ease-in-out;
}

Затем вы можете использовать как обычно:

$('#div').fadeOut(function() { console.log('done!') };

То же самое можно сделать с помощью fadeIn.

Источник
Другие вопросы по тегам