jquery animate() interfering with css transition resulting in buggy animation

up vote
1
down vote

favorite

I have an odd problem where jquery animate() seems to be interfering with css transitions. I pinned down the problem to this css transition:

 transition: 0.5s;

Here the code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">



    $(document).ready(

        function() {

            $(".closebtn").click(

                function() {

                    $('#myNav').animate(

                        {

                            'width': '0%'

                        },

                        5000,

                        function() {

                            window.location.href = "blog.html"; //will redirect to your blog page (an ex: blog.html)

                        }

                    );



                }

            );

        }

    )

</script>



<style>

body {

    font-family: 'Lato', sans-serif;

}



.overlay {

    height: 100%;

    width: 10%;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0, 0.9);

    overflow-x: hidden;

    transition: 0.5s;

}



.overlay:hover {

    width: 20%;

}



.overlay-content {

    position: relative;

    top: 25%;

    width: 100%;

    text-align: center;

    margin-top: 30px;

}



.overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 36px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.overlay a:hover, .overlay a:focus {

    color: #f1f1f1;

}



.overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

}



@media screen and (max-height: 450px) {

  .overlay a {font-size: 20px}

  .overlay .closebtn {

    font-size: 40px;

    top: 15px;

    right: 35px;

  }

}

</style>

</head>

<body>



<div id="myNav" class="overlay">

  <a href="#" class="closebtn">&times;</a>

  <div class="overlay-content">

    <a href="#">About</a>

    <a href="#">Services</a>

    <a href="#">Clients</a>

    <a href="#">Contact</a>

  </div>

</div>



<h2>Fullscreen Overlay Nav Example</h2>

<p>Click on the element below to open the fullscreen overlay navigation menu.</p>

<p>In this example, the navigation menu will slide in, from left to right:</p>

<span style="margin-left:200px;font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>



<script>

function openNav() {

  document.getElementById("myNav").style.width = "100%";

}



function closeNav() {



    document.getElementById("myNav").style.width = "0%";



   setTimeout(function () {

    window.location.href = "blog.html"; //will redirect to your blog page (an ex: blog.html)

    }, 1.5); //will call the function after 2 secs.



}

</script>



</body>

</html>

Here is a fiddle: https://jsfiddle.net/sezj2tvq/

You click on "Open" and the overlay opens. Click on "X" for closing the overlay. When closing the overlay, the animation is kind of sluggish.

When I remove the css transition, the animation works fine. But, of course, the hover effect has no transition anymore.

On my desktop (Win 7), when clicking "x" for closing the overlay, it somehow strangely counts the width, you can see it in Firefox Code-Inspector. It doesn't count from 100% to 0% (closing the overlay), but it starts at something like width="1600%" or something, counting down to "0%", which results in a strange animation.

Can anyone help?

asked Nov 22 at 14:02

user838531

12919

add a comment |

up vote
1
down vote

favorite

I have an odd problem where jquery animate() seems to be interfering with css transitions. I pinned down the problem to this css transition:

 transition: 0.5s;

Here the code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">



    $(document).ready(

        function() {

            $(".closebtn").click(

                function() {

                    $('#myNav').animate(

                        {

                            'width': '0%'

                        },

                        5000,

                        function() {

                            window.location.href = "blog.html"; //will redirect to your blog page (an ex: blog.html)

                        }

                    );



                }

            );

        }

    )

</script>



<style>

body {

    font-family: 'Lato', sans-serif;

}



.overlay {

    height: 100%;

    width: 10%;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0, 0.9);

    overflow-x: hidden;

    transition: 0.5s;

}



.overlay:hover {

    width: 20%;

}



.overlay-content {

    position: relative;

    top: 25%;

    width: 100%;

    text-align: center;

    margin-top: 30px;

}



.overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 36px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.overlay a:hover, .overlay a:focus {

    color: #f1f1f1;

}



.overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

}



@media screen and (max-height: 450px) {

  .overlay a {font-size: 20px}

  .overlay .closebtn {

    font-size: 40px;

    top: 15px;

    right: 35px;

  }

}

</style>

</head>

<body>



<div id="myNav" class="overlay">

  <a href="#" class="closebtn">&times;</a>

  <div class="overlay-content">

    <a href="#">About</a>

    <a href="#">Services</a>

    <a href="#">Clients</a>

    <a href="#">Contact</a>

  </div>

</div>



<h2>Fullscreen Overlay Nav Example</h2>

<p>Click on the element below to open the fullscreen overlay navigation menu.</p>

<p>In this example, the navigation menu will slide in, from left to right:</p>

<span style="margin-left:200px;font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>



<script>

function openNav() {

  document.getElementById("myNav").style.width = "100%";

}



function closeNav() {



    document.getElementById("myNav").style.width = "0%";



   setTimeout(function () {

    window.location.href = "blog.html"; //will redirect to your blog page (an ex: blog.html)

    }, 1.5); //will call the function after 2 secs.



}

</script>



</body>

</html>

Here is a fiddle: https://jsfiddle.net/sezj2tvq/

You click on "Open" and the overlay opens. Click on "X" for closing the overlay. When closing the overlay, the animation is kind of sluggish.

When I remove the css transition, the animation works fine. But, of course, the hover effect has no transition anymore.

Can anyone help?

asked Nov 22 at 14:02

user838531

12919

add a comment |

up vote
1
down vote

favorite

I have an odd problem where jquery animate() seems to be interfering with css transitions. I pinned down the problem to this css transition:

 transition: 0.5s;

Here the code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">



    $(document).ready(

        function() {

            $(".closebtn").click(

                function() {

                    $('#myNav').animate(

                        {

                            'width': '0%'

                        },

                        5000,

                        function() {

                            window.location.href = "blog.html"; //will redirect to your blog page (an ex: blog.html)

                        }

                    );



                }

            );

        }

    )

</script>



<style>

body {

    font-family: 'Lato', sans-serif;

}



.overlay {

    height: 100%;

    width: 10%;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0, 0.9);

    overflow-x: hidden;

    transition: 0.5s;

}



.overlay:hover {

    width: 20%;

}



.overlay-content {

    position: relative;

    top: 25%;

    width: 100%;

    text-align: center;

    margin-top: 30px;

}



.overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 36px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.overlay a:hover, .overlay a:focus {

    color: #f1f1f1;

}



.overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

}



@media screen and (max-height: 450px) {

  .overlay a {font-size: 20px}

  .overlay .closebtn {

    font-size: 40px;

    top: 15px;

    right: 35px;

  }

}

</style>

</head>

<body>



<div id="myNav" class="overlay">

  <a href="#" class="closebtn">&times;</a>

  <div class="overlay-content">

    <a href="#">About</a>

    <a href="#">Services</a>

    <a href="#">Clients</a>

    <a href="#">Contact</a>

  </div>

</div>



<h2>Fullscreen Overlay Nav Example</h2>

<p>Click on the element below to open the fullscreen overlay navigation menu.</p>

<p>In this example, the navigation menu will slide in, from left to right:</p>

<span style="margin-left:200px;font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>



<script>

function openNav() {

  document.getElementById("myNav").style.width = "100%";

}



function closeNav() {



    document.getElementById("myNav").style.width = "0%";



   setTimeout(function () {

    window.location.href = "blog.html"; //will redirect to your blog page (an ex: blog.html)

    }, 1.5); //will call the function after 2 secs.



}

</script>



</body>

</html>

Here is a fiddle: https://jsfiddle.net/sezj2tvq/

You click on "Open" and the overlay opens. Click on "X" for closing the overlay. When closing the overlay, the animation is kind of sluggish.

When I remove the css transition, the animation works fine. But, of course, the hover effect has no transition anymore.

Can anyone help?

asked Nov 22 at 14:02

user838531

12919

I have an odd problem where jquery animate() seems to be interfering with css transitions. I pinned down the problem to this css transition:

 transition: 0.5s;

Here the code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">



    $(document).ready(

        function() {

            $(".closebtn").click(

                function() {

                    $('#myNav').animate(

                        {

                            'width': '0%'

                        },

                        5000,

                        function() {

                            window.location.href = "blog.html"; //will redirect to your blog page (an ex: blog.html)

                        }

                    );



                }

            );

        }

    )

</script>



<style>

body {

    font-family: 'Lato', sans-serif;

}



.overlay {

    height: 100%;

    width: 10%;

    position: fixed;

    z-index: 1;

    top: 0;

    left: 0;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0, 0.9);

    overflow-x: hidden;

    transition: 0.5s;

}



.overlay:hover {

    width: 20%;

}



.overlay-content {

    position: relative;

    top: 25%;

    width: 100%;

    text-align: center;

    margin-top: 30px;

}



.overlay a {

    padding: 8px;

    text-decoration: none;

    font-size: 36px;

    color: #818181;

    display: block;

    transition: 0.3s;

}



.overlay a:hover, .overlay a:focus {

    color: #f1f1f1;

}



.overlay .closebtn {

    position: absolute;

    top: 20px;

    right: 45px;

    font-size: 60px;

}



@media screen and (max-height: 450px) {

  .overlay a {font-size: 20px}

  .overlay .closebtn {

    font-size: 40px;

    top: 15px;

    right: 35px;

  }

}

</style>

</head>

<body>



<div id="myNav" class="overlay">

  <a href="#" class="closebtn">&times;</a>

  <div class="overlay-content">

    <a href="#">About</a>

    <a href="#">Services</a>

    <a href="#">Clients</a>

    <a href="#">Contact</a>

  </div>

</div>



<h2>Fullscreen Overlay Nav Example</h2>

<p>Click on the element below to open the fullscreen overlay navigation menu.</p>

<p>In this example, the navigation menu will slide in, from left to right:</p>

<span style="margin-left:200px;font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>



<script>

function openNav() {

  document.getElementById("myNav").style.width = "100%";

}



function closeNav() {



    document.getElementById("myNav").style.width = "0%";



   setTimeout(function () {

    window.location.href = "blog.html"; //will redirect to your blog page (an ex: blog.html)

    }, 1.5); //will call the function after 2 secs.



}

</script>



</body>

</html>

Here is a fiddle: https://jsfiddle.net/sezj2tvq/

You click on "Open" and the overlay opens. Click on "X" for closing the overlay. When closing the overlay, the animation is kind of sluggish.

When I remove the css transition, the animation works fine. But, of course, the hover effect has no transition anymore.

Can anyone help?

jquery css-transitions transition

asked Nov 22 at 14:02

user838531

12919

asked Nov 22 at 14:02

user838531

12919

asked Nov 22 at 14:02

user838531

12919

asked Nov 22 at 14:02

user838531

12919

asked Nov 22 at 14:02

user838531

12919

add a comment |

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53432652%2fjquery-animate-interfering-with-css-transition-resulting-in-buggy-animation%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi