jQuery проблема изменения размера

Question

jQuery проблема изменения размера

0

Я делаю простую анимацию, если width is > 800px экрана width is > 800px 800 width is > 800px и ничего не делать (просто оставайтесь со значением по умолчанию css), если оно <800, проблемы:

с шириной окна> 800: обновляю страницу, если она не делает анимацию, если я не изменю размер, чтобы вызвать функцию изменения размера.
с окном <800: если бы я сделал анимацию (> 800 пикселей), а затем изменил размер до <800, анимация по-прежнему продолжается, а не только уважает css и ничего больше. Какие-нибудь советы?

JS:

  $(document).ready(function () {
      $(window).resize(function () {
          if ($(window).width() > 800) {
              $('#upBar, nav').hover(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '60px'
                  }, 200);
              });


              $('#upBar, nav').mouseleave(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '45px'
                  }, 200);
              });
          } else {}
      })
  })

HTML:

<html lang="en" />
<head>
    <meta charset="UTF-8">
    <title>Intertrafego - Quem Somos</title>
    <link rel="stylesheet" href="css/navBar.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/stylesAboutUs.css">
    <meta name="viewport" content="width=width-device, initial-scale=1.0" />
</head>
<body data-stellar-background-ratio="0.2">
    <div id="upBar"></div>
    <div id="middleBar"></div>
    <div id="middleImg"></div>
    <div id="missValBar"></div>
    <div id="wrapper">
        <header>
            <nav>   <a href="index.html"><img id="logo" src="imgs/logo.png"></a>
    <a href="quem_somos.html"><div id="langMobile">EN<br>&#8595;<br>Pt</div></a>

                <div id="btnMobile">
                    <img src="imgs/mobileBtn.jpg">
                </div>
                <ul>
                    <li id="lang"><a id="PT" href="quem_somos.html">PT</a> / <a id="EN" href="#">EN</a>

                    </li>   <a href="news.html"><li>News</li></a>
    <a href="logistics.html"><li>Logistics</li></a>
    <a href="services.html"><li>Services</li></a>
    <a href="#"><li>About Us</li></a>

                </ul>
            </nav>
        </header>

Miguel 23 фев. 2014, в 12:37

Источник

0

опубликовать свой HTML, а также пожалуйста
Volkan Ulukut 23 фев. 2014, в 10:57
0

Если вам не требуется поддержка старых браузеров, я рекомендую использовать CSS 3 Media Queries and Transitions. Но ваше решение не работает так, как вы ожидаете, потому что $(window).resize срабатывает только при изменении размера окна. Поэтому, когда вы обновляете страницу, вы больше не видите анимацию. Кроме того, метод анимации jQuery, если я правильно помню, использует встроенные стили (например, <foo style="width: 300px;">...</foo> для изменения размера элементов).
Behrang 23 фев. 2014, в 11:05

Теги:

jquery

resize

animation

3 ответа

Ещё вопросы

опубликовать свой HTML, а также пожалуйста
Если вам не требуется поддержка старых браузеров, я рекомендую использовать CSS 3 Media Queries and Transitions. Но ваше решение не работает так, как вы ожидаете, потому что $(window).resize срабатывает только при изменении размера окна. Поэтому, когда вы обновляете страницу, вы больше не видите анимацию. Кроме того, метод анимации jQuery, если я правильно помню, использует встроенные стили (например, <foo style="width: 300px;">...</foo> для изменения размера элементов).

Volkan Ulukut · Answer 1 · 2014-02-23T09-49-00.000Z

0

Если ваша страница запущена с> 800, события привязаны и не отключаются. вы должны добавить инструкцию unbinds в else. вот как выглядит JSFiddle:

else {
    $('#upBar, nav').unbind("hover");
    $('#upBar, nav').unbind("mouseleave");
}

вам также нужно запустить код на готовом документе

$(document).ready(function () {
          if ($(window).width() > 800) {
              $('#upBar, nav').hover(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '60px'
                  }, 200);
              });


              $('#upBar, nav').mouseleave(function () {
                  $('#upBar, nav ul').stop(true).animate({
                      height: '45px'
                  }, 200);
              });
          }
  })

Volkan Ulukut 23 фев. 2014, в 09:49

0

Что-то должно быть не так. я только что реализовал unbind на 'else', и он ничего не делает, не знаю почему
Miguel 23 фев. 2014, в 11:18
0

добавлена ссылка JSFiddle для реализации
Volkan Ulukut 23 фев. 2014, в 11:28
0

Лучше, спасибо, однако проблема 2. все еще происходит, атрибуты анимации mouseleave остаются, пока я не наведу их хотя бы один раз на ширину окна <800
Miguel 23 фев. 2014, в 11:35
0

Вы можете обновить свой код, чтобы отразить то, что вы уже сделали?
Volkan Ulukut 23 фев. 2014, в 11:50
0

я действительно ничего не изменил, однако самым близким решением был ваш ответ, jsfiddle, который вы сделали
Miguel 23 фев. 2014, в 11:58
0

Вы добавили оператор else, команды unbind в функцию window.resize?
Volkan Ulukut 23 фев. 2014, в 12:01
0

Тявкать на самом деле я скопировал и вставьте его. я также пытался отменить привязку мышиного выхода (так как по совпадению с css я хочу, чтобы атрибуты hover остались), но у него есть небольшая проблема, о которой я говорил выше
Miguel 23 фев. 2014, в 12:09
0

Проблема 2. происходит, пока я не наведу ее. действительно лучше
Miguel 23 фев. 2014, в 12:15
0

возможно, вам следует вручную запустить код в одном из этих событий после изменения размера страницы. Так как я не знаю ваш CSS и как он выглядит на веб-странице, я не могу больше рассуждать. у вас есть эта страница и работает на сервере?
Volkan Ulukut 23 фев. 2014, в 12:19
0

Нет, я могу сказать это завтра. Могу ли я отправить вам сообщение, когда оно онлайн?
Miguel 23 фев. 2014, в 12:21
0

Обязательно просто прокомментируй здесь.
Volkan Ulukut 23 фев. 2014, в 12:25
0

Здравствуйте, Volkan, вы там? ... Я только что загрузил файлы на datafilehost.com/d/7e145bbc , я работаю над страницей Us / quem somos. Как вы можете видеть, анимация, когда ширина> 800 работает нормально, но когда она <800, мне бы хотелось, чтобы поведение индексной страницы было не более, не менее, при изменении размера и при обновлении, и после анимации она видела изменение размера до < 800 это не относится к медиа-запросам на navBar.css, не знаю почему. извините за беспокойство и большое спасибо
Miguel 24 фев. 2014, в 10:21

Показать ещё 10 комментариев

Lucky Soni · Answer 2 · 2014-02-23T09-00-00.000Z

0

FIDDLE

$(document).ready(function () {
    doAnnimation();
    $(window).resize(function () {
        $('#upBar').off('mouseenter mouseleave', annimateNav);
        doAnnimation();
    });
});

function doAnnimation() {
    if ($(window).width() > 800) {
        $('#upBar').on('mouseenter mouseleave', annimateNav);
    }
}

function annimateNav() {
    var height = '60px';
    if( $('#upBar').hasClass('animating') ) {
        height = '45px';
    }
    $('#upBar').toggleClass('animating').stop(true).animate({
        height: height
    }, 200);
}

Я рекомендую вам взглянуть на этот вопрос, чтобы эффективно обрабатывать события изменения размера.

Lucky Soni 23 фев. 2014, в 09:00

0

Почему необходимо разделить этот код на отдельный метод, а затем вызвать событие resize ? Я не нахожу разницы.
Praveen 23 фев. 2014, в 11:06
0

@Praveen, потому что он хочет вызывать одну и ту же функцию более одного раза .. один раз при загрузке страницы, а затем при каждом последующем событии изменения размера.
Lucky Soni 23 фев. 2014, в 11:07
0

разве мне не нужна пустота?
Miguel 23 фев. 2014, в 11:08
0

@ user3162303 нет, ты не
Lucky Soni 23 фев. 2014, в 11:08
0

вам нужно другое выражение для события resize, потому что если вы не открепите те события, которые вы прикрепили, вы не сможете избавиться от них при меньшей ширине. проверь мой ответ.
Volkan Ulukut 23 фев. 2014, в 11:10
0

Проблема № 2 все еще происходит
Miguel 23 фев. 2014, в 11:12
0

@ user3162303 проверка обновлена
Lucky Soni 23 фев. 2014, в 11:44
0

@ user3162303 обновлен снова.
Lucky Soni 23 фев. 2014, в 11:50
0

Я действительно предпочел бы не редактировать файл CSS (добавить класс) это возможно? извините за беспокойство. Спасибо
Miguel 23 фев. 2014, в 11:51
0

@ user3162303 вам не нужно редактировать файл CSS .. просто попробуйте это .. нет необходимости редактировать файл CSS вообще.
Lucky Soni 23 фев. 2014, в 11:52
0

Где-то должна быть ошибка, я не могу ее найти, она ничего не делает
Miguel 23 фев. 2014, в 12:01
0

@ user3162303 Проверить сейчас
Lucky Soni 23 фев. 2014, в 13:15

Показать ещё 10 комментариев

Struchu · Answer 3 · 2014-02-23T08-59-00.000Z

Во-первых: для запуска события изменения размера просто вызывается изменение размера после настройки обработчика:

Во-вторых: чтобы остановить анимацию, когда экран меньше, удалите обработчики событий, используя метод jQuery .off, вызываемый в обработчике изменения размера.

Весь код будет выглядеть примерно так:

$(document).ready(function () {
  var hoverHandler = function() {
      $('#upBar, nav ul').stop(true).animate({
          height: '60px'
      }, 200);
  };

  var mouseleaveHandler = function() {
      $('#upBar, nav ul').stop(true).animate({
          height: '45px'
      }, 200);
  };

  var handlersAdded = false;               // this prevents from multiple event binds

  $(window).resize(function () {
      var $hoverTarget = $('#upBar, nav');

      if ($(window).width() > 800) {
          if(!handlersAdded) {
              $hoverTarget.hover(hoverHandler)
                  .mouseleave(mouseleaveHandler);

              handlersAdded = true;
          }
      } else {
          $hoverTarget.off('hover', hoverHandler)
              .off('mouseleave', mouseleaveHandler);

          $('#upBar, ul nav').stop(true).removeAttr('style');

          handlersAdded = false;
     }
  }).resize();
});

Вы можете опубликовать свою идею, используя мой код, пожалуйста?
Как только я доберусь до ПК. Я сейчас на своем мобильном, и не очень удобно отправлять код отсюда ;-)
Хорошо, пожалуйста, не забывайте. Большое спасибо, ура
Лучше, спасибо, однако проблема 2. все еще происходит по-другому, атрибуты анимации отпускания мыши остаются до тех пор, пока я не наведу их хотя бы один раз на ширину окна <800. Я опубликую его завтра как тест, и вы сможете проверить. Танки очень много для ответа, вы не забыли ура
Хорошо, у меня может быть решение этой проблемы. В другом выражении вызова функции изменения размера .removeAttr ('style') для анимированного элемента. Я скоро обновлю свой ответ.
Спасибо за лучшее решение, хотя теперь вы не уважаете медиа-запросы для экрана <800, если я изменяю размер с> 800. Если вы не возражаете, мы можем придумать, как мне отправить вам файлы, чтобы вы могли видеть именно то, о чем я говорю
Пожалуйста, загрузите ваши файлы на какой-нибудь файловый хостинг и опубликуйте URL здесь - я посмотрю.
Привет Стручу, я просто загрузить его. спасибо за вашу проблему, ссылка datafilehost.com/d/7e145bbc , я работаю над quem somos / о нас страница. Как вы можете видеть, анимация, когда ширина> 800 работает нормально, но когда она <800, мне бы хотелось, чтобы поведение индексной страницы было не более и не менее, при изменении размера и при обновлении, и оно просматривалось после анимации и изменения размера в <800 не соблюдает медиазапросы для ul на navBar.css, не знаю почему. извините за беспокойство и большое спасибо