JQuery: как использовать слушатель событий для анимации?

Question

JQuery: как использовать слушатель событий для анимации?

0

$(function(){
    if($(window).width()>1100){
        $("#logo").hover(function(){
            $(this).animate({paddingTop:"0px",paddingBottom:"20px"},200);
            },function(){
                $(this).animate({paddingTop:"20px",paddingBottom:"0"},200);
                });
        }
    $(window).resize(function(){
        if($(window).width()>1100){
            $("#logo").hover(function(){
                $(this).animate({paddingTop:"0px",paddingBottom:"20px"},200);
                },function(){
                    $(this).animate({paddingTop:"20px",paddingBottom:"0"},200);
                    });
            }
        });
    });

Прямо сейчас, эта анимация выполняется только тогда, когда ширина окна больше 1100 пикселей, но для обновления браузера требуется "обновление" браузера. Как это можно устранить, чтобы обновление браузера не требовалось?

oceanic815 24 фев. 2014, в 01:58

Источник

Теги:

jquery

resize

2 ответа

0

Назовите свою функцию и прослушайте событие изменения размера так:

$(window).on("resize", yourfunction());

Hoff 23 фев. 2014, в 23:08

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-02-23T23-33-00.000Z

Регистрируйте/Отмените регистрацию обработчиков в событии изменения размера на основе размера окна.

$(function () {
    $(window).resize(function () {
        if ($(window).width() > 1100) {
            $("#logo").on('mouseenter.anim', function () {
                $(this).animate({
                    paddingTop: "0px",
                    paddingBottom: "20px"
                }, 200);
            }).on('mouseleave.anim', function () {
                $(this).animate({
                    paddingTop: "20px",
                    paddingBottom: "0"
                }, 200);
            });
        } else {
            $("#logo").off('mouseenter.anim mouseleave.anim');
        }
    }).resize();
});

Демо: скрипка

Когда окно закрывается, анимация успешно деактивируется. Но когда окно снова расширяется, активируя анимацию, оно становится очень прерывистым / медленным. Есть идеи почему?
Это также отстает в скрипке. Это то, с чем мне просто нужно жить?
Этот твик исправил это. Твой гвоздик.
Как бы вы изменили этот скрипт, чтобы использовать ширину области просмотра вместо ширины документа, чтобы он соответствовал медиазапросу CSS?
@ oceanic815 В любом случае я не использовал его ранее, попробуйте stackoverflow.com/questions/18546067/… или matanich.com/2013/01/07/viewport-size