jQuery resizing animation

Question

jQuery resizing animation

Asked 10 years, 9 months ago

Viewed 653 times

6

Hello I am making a site with a small animation that is changed depending on the size window but there are 2 problems in Nav bar. Problems are:

window > 800: animation is only trigered when I move in window size.
window < 800: wanted animation to stop having an effect and respect only css (media queries for window < 800), but it continues, and the menu does not respect the media queries if we open it after the animação > 800 is activated.

jQuery:

    $(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 {

    }
    })
})

had closed just copying to here did not stay

– Miguel

2014/02/24 at 14:08

2 answers

4

Answer

Your current problem is that the action is only appended to the element(s) if a certain condition is met, in this case, the screen width greater than 800 pixels.

In addition, the way you currently have the code, it is necessary to perform a "cleaning" of styles resulting from the animation so that the layout continues to respond to media queries and/or other styles in your CSS.

My suggestion is to change your code so that the events of hover and mouseleave are always attached to the elements but only animation is performed if the condition is met: screen width greater than 800 pixels.

Mouse animation entering widget

Function with the code responsible for performing the animation when the mouse enters the target element(s):

// Animação quando o rato vai para cima
function mouseEnterAnimation(allowAnimation) {
    if (allowAnimation) {
        $('#upBar, nav ul').stop(true).animate({
            "height" : "60px"
        }, 200);

        $('nav ul li').stop(true).animate({
            "padding-top"    : "20px",
            "padding-bottom" : "20px",
            "height"         : "60px"
        }, 200);

        $('#lang').stop(true).animate({
            "padding-top"    : "23px",
            "padding-bottom" : "23px",
            "height"         : "60px"
        }, 200);

        $('#logo').stop(true).animate({
            "margin-top"  : "15px",
            "margin-left" : "10px"
        }, 200);
    }
}

Mouse animation exiting element

Function with the code responsible for performing the animation when the mouse leaves the element(s)):

// Animação quando o rato sai de cima
function mouseLeaveAnimation(allowAnimation) {

    if (allowAnimation) {

        $('#upBar, nav ul').stop(true).animate({
            "height": "45px"
        }, 200, function() {
            $('#upBar, nav ul').removeAttr("style"); // limpeza
        });

        $('nav ul li').stop(true).animate({
            "padding-top"    : "13px",
            "padding-bottom" : "13px",
            "height"         : "45px"
        }, 200);

        $('#lang').stop(true).animate({
            "padding-top"    : "16px",
            "padding-bottom" : "16px",
            "height"         : "45px"
        }, 200);

        $('#logo').stop(true).animate({
            "margin-top"  : "7px",
            "margin-left" : "10px"
        }, 200);
    }
}

Important fact, I added a cleaning after the animation, because it was the residue in the elements and broke the height of the menu when on screens smaller than 800 pixels.

What I did was call a function when the animation ends in $('#upBar, nav ul'), where I say the tag should be removed style where were the styles resulting from the animation:

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

Code initialization and animation control

Here we are initializing the code and controlling whether or not the animation should occur:
```
$(document).ready(function () {

    var $topNav = $('#upBar, nav'),                 // colocar elementos alvo em cache
        allowAnimation = ($(window).width() > 800); // verifica se deve animar

    $topNav.hover(
        function(){  // rato a entrar
            mouseEnterAnimation(allowAnimation);
        },
        function(){  // rato a sair
            mouseLeaveAnimation(allowAnimation);
        }
    );

    $(window).resize(function() {
        allowAnimation = ($(window).width() > 800); // atualiza se deve animar
    });
});
```
- First we are caching target elements, to prevent us from always locating them in the DOM;
- Then we are starting the variable that authorizes or denies the animation with the resulting value of the screen width condition greater than 800 pixels (we will get or true or false);
- We attach the incoming mouse and mouse event to the element we cache;
- If the mouse is entering, we call the function mouseEnterAnimation() and we pass to the same the state of the animation contained in the variable allowAnimation;
- If the mouse is leaving, we call the function mouseLeaveAnimation() and we pass to the same the state of the animation contained in the variable allowAnimation;
- Finally, whenever the window is being resized, we update our control variable with the result of the condition.

Result of the above amendments

Your file navBar.js would look like this:

// Animação quando o rato vai para cima
function mouseEnterAnimation(allowAnimation) {
    if (allowAnimation) {
        $('#upBar, nav ul').stop(true).animate({
            "height" : "60px"
        }, 200);

        $('nav ul li').stop(true).animate({
            "padding-top"    : "20px",
            "padding-bottom" : "20px",
            "height"         : "60px"
        }, 200);

        $('#lang').stop(true).animate({
            "padding-top"    : "23px",
            "padding-bottom" : "23px",
            "height"         : "60px"
        }, 200);

        $('#logo').stop(true).animate({
            "margin-top"  : "15px",
            "margin-left" : "10px"
        }, 200);
    }
}


// Animação quando o rato sai de cima
function mouseLeaveAnimation(allowAnimation) {

    if (allowAnimation) {

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

        $('nav ul li').stop(true).animate({
            "padding-top"    : "13px",
            "padding-bottom" : "13px",
            "height"         : "45px"
        }, 200);

        $('#lang').stop(true).animate({
            "padding-top"    : "16px",
            "padding-bottom" : "16px",
            "height"         : "45px"
        }, 200);

        $('#logo').stop(true).animate({
            "margin-top"  : "7px",
            "margin-left" : "10px"
        }, 200);
    }
}


$(document).ready(function () {

    var $topNav = $('#upBar, nav'),
        allowAnimation = ($(window).width() > 800);

    $topNav.hover(
        function(){
            mouseEnterAnimation(allowAnimation);
        },
        function() {
            mouseLeaveAnimation(allowAnimation);
        }
    );

    $(window).resize(function() {
        allowAnimation = ($(window).width() > 800);
    });
});

Overhaul

I downloaded the files from the site you refer to in the question, and I should warn you that you have one army problems to be solved if you want things to work as intended:

Auto-close tag HTML

You’re not supposed to be auto-closing the tag html, since it must be closed at the end of the whole document:
```
<html lang="en"/>
```
Should be:
```
<html lang="en">
```

The menu has the changed Markup

In your menu, you have a list containing links to the various areas of the web-site, but it contains the exchanged Markup where you are wrapping up the li in a when it should be the other way round, the li to involve the a:

<ul>
  <li id ="lang"><a id ="PT" href="#">PT</a> / <a id ="EN" href="about_us.html">EN</a></li>
  <a href="noticias.html"><li>Notícias</li></a>
  <a href="logistica.html"><li>Logística</li></a>
  <a href="servicos.html"><li>Serviços</li></a>
  <a href="#"><li>Quem Somos</li></a>
</ul>

Should be:

<ul>
  <li id ="lang">
    <a id ="PT" href="#">PT</a> / <a id ="EN" href="about_us.html">EN</a>
  </li>
  <li>
    <a href="noticias.html">Notícias</a>
  </li>
  <li>
    <a href="logistica.html">Logística</a>
  </li>
  <li>
    <a href="servicos.html">Serviços</a>
  </li>
  <li>
    <a href="#">Quem Somos</a>
  </li>
</ul>

You have an error regarding Stellar.js v0.6.2:

Typeerror: $.Stellar is not a Function
file://home/Salustiano/Desktop/w/Intertrafego/quem_somos.html
Line 82

Javascript errors usually interrupt the execution of Javascript on the page, particularly in a few browsers hard with the programmer.

The problem is in the tag script which includes the Stellar.js whose same:
```
<script type="text/javascript" src="js/jQuery.stellar.js"></script>
```
But the file’s called jquery.stellar.js, notice the word jquery all in lower case, so either change the file name or the call to it:
```
<script type="text/javascript" src="js/jquery.stellar.js"></script>
```
To script tag ^(English) can be used to contain various types of script, therefore it must be indicated which type is present in it since there is no default value and the attribute type is mandatory:

This attribute specifies the scripting language of the element’s Contents and overrides the default scripting language. The scripting language is specified as a content type (e.g., "text/javascript"). Authors must Supply a value for this attribute. There is no default value for this attribute.

That translated:

This attribute specifies the scripting language of the element content and replaces the default scripting language. The scripting language is specified as a type of content (e.g., "text/javascript"). Authors must provide a value for this attribute. There is no default value for this attribute.

In your document, where do you have:
```
<script>
  $(document).ready(function() { 
    ...
  });
</script>
```
You should have:
```
<script type="text/javascript">
  $(document).ready(function() { 
    ...
  });
</script>
```

Outcome of the review

An improved version of your file quem_somos.html:

<!DOCTYPE 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="about_us.html">
                        <div id="langMobile">PT<br>&#8595;<br>En</div>
                    </a>
                    <div id ="btnMobile">
                        <img src ="imgs/mobileBtn.jpg">
                    </div>
                    <ul>
                        <li id ="lang">
                            <a id ="PT" href="#">PT</a> / <a id ="EN" href="about_us.html">EN</a>
                        </li>
                        <li>
                            <a href="noticias.html">Notícias</a>
                        </li>
                        <li>
                            <a href="logistica.html">Logística</a>
                        </li>
                        <li>
                            <a href="servicos.html">Serviços</a>
                        </li>
                        <li>
                            <a href="#">Quem Somos</a>
                        </li>
                    </ul>
                </nav>
            </header>

            <div id="middleText">
                <h1>3 GERAÇÕES DE SERVIÇOS</h1>
                <p>Fundada em 1967, a Intertráfego atua como agente de transportes e transitários internacionais. Tem como base de clientes algumas das mais prestigiadas empresas do nosso país, com um serviço profissional e personalizado. Possui uma frota própria e capacidade de armazenagem. O crescimento gradual desde o seu nascimento, traduz o sucesso de negócio em 3 gerações.</p>
            </div>

            <div id="namesJobs">
                <div id="pedro"><h1>PEDRO NUNES & TOMÉ ELIAS</h1><h2>MATURIDADE</h2><p>Fundadores<br><br>Experiência de mercado e metodologia.</p></div>
                <div id="joaquim"><h1>JOAQUIM PEDRO</h1><h2>PARCERIAS</h2><p>Experiência e know-how no mercado internacional, participando em congressos e feiras internacionais<br><br>Rede de contactos, agentes, fornecedores e clientes.</p></div>
                <div id="miguel"><h1>MIGUEL NUNES</h1><h2>INOVAÇÃO</h2><p>Novos conceitos e empreendorismo<br><br>Inovação e novas tecnologias.</p></div>
            </div>

            <div id="missValText">
                <div id="mission">
                    <h1>MISSÃO</h1><p>A Intertráfego tem como principal missão crescer em conjunto com os seus parceiros, sempre com alta qualidade de serviço e flexibilidade na resolução das necessidades dos seus clientes. Acreditamos que a chave do sucesso está na disponibilidade e empenho que alocamos a cada projecto o que se revela também nas nossas práticas e ambições além fronteiras.</p>
                </div>
                <div id ="val">
                    <h1>VALORES</h1><p>A identidade da Intertráfego é moldada pelos seus clientes e serviços. Quatro valores fundamentais unem a empresa e formam a base da cultura de sucesso empresarial da mesma: Segurança, Inovação, Fiabilidade e Flexibilidade. Os valores assentam na herança das suas gerações e são fonte de inspiração para o futuro.</p>
                </div>
            </div>

            <div id ="contact">
                <div id="mail">
                    <a href="mailto:[email protected]" target="_blank"><p>[email protected]</p></a>
                </div>
                <div id="tele">
                    <a href="tel:+(351) 263 470 020"><p>+(351) 263 470 020</p></a>
                </div>
                <a href="pedir_cotacao.html">
                    <div id="cotacao">
                        <p>PEDIR COTAÇÃO</p><img src="imgs/cotArrow.png">
                    </div>
                </a>
            </div>

        </div>

        <div id="footerTopMargin"></div>
        <div id="footer"></div>

        <script type="text/javascript" src="js/jQuery v1.10.2.js"></script>
        <script type="text/javascript" src="js/jquery.stellar.js"></script>
        <script type="text/javascript" src="js/navBar.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $.stellar({
                    horizontalScrolling: false,
                    verticalOffset: 700
                });

                $('li:eq(4)').addClass('active');
                $('#PT').addClass('activeLang');

                $("#btnMobile").on("click", function(){
                    $("nav ul").stop(true).slideToggle();
                });

                $( window ).resize(function navOff() {
                    if ($(window).width() > 800) {
                        $('nav ul').show();
                    } else {
                        $('nav ul').hide();
                    }
                });
            });
        </script>
    </body>
</html>

Note: There are other things that could be improved, but I highlighted only the most problematic.

Thank you very much Zuul, perfect working. You are very good at it. obvious by the tips

– Miguel

2014/02/25 at 11:40

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Jonas Hartmann • **101** points · Answer 1 · 2014-02-24T14:12:24+00:00

Code is adding events to elements when window > 800

Only then when the window gets smaller, the events are still there as they have not been removed.

.Hover() API: http://api.jquery.com/hover/

"Bind one or two handlers to the Matched Elements"

One possible solution is to place the window size test inside each function executed when events are triggered:

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


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

jQuery resizing animation

2 answers

Answer

Mouse animation entering widget

Mouse animation exiting element

Code initialization and animation control

Result of the above amendments

Overhaul

Outcome of the review