Question

Everything is “working” here but my animation isn’t displaying properly. I want the toggle button to move up in position while the navigation disappears, but the “slow” isn’t working.

JQuery:

//Close and open
$(document).ready(function(){
$(".open, .close").click(function(){
    $(".navigation").slideToggle("slow");
    $(".open").toggle();
    $(".close").toggle();
    $(".navigation").css("display","inline");
    $(".collapse").toggleClass("collapse-closed","slow");
  });
});

CSS

.open{
    display:block;
    margin: 12px auto 0px;
    padding:0px;
    width: 0; 
    height: 0; 
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 13px solid #9b9b9b;
    transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
    cursor: pointer;
}
.open:hover{
    border-top: 13px solid #A70400;
    }
.close{
    display:none;
    margin: 10px auto 0px;
    padding:0px;
    width: 0; 
    height: 0; 
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid #9b9b9b;
    transition: all 0.3s;
    -moz-transition: all 0.3s; /* Firefox 4 */
    -webkit-transition: all 0.3s; /* Safari and Chrome */
    -o-transition: all 0.3s; /* Opera */
    cursor: pointer;
}
.close:hover{
    border-bottom: 13px solid #A70400;
}
.collapse {
    background-color: #f6f6f6;
    border-radius: 4px;
    border: 1px solid #919191;
    -moz-box-shadow: 0 2px 4px #bdbdbd;
    -webkit-box-shadow: 0 2px 4px #bdbdbd;
    box-shadow: 0 2px 4px #bdbdbd;
    z-index:8;
    width: 46px;
    height: 36px;
    margin-bottom: -40px;
    right: 20px;
    position: fixed;
    top: 24px;
}
.collapse-closed {
    top: -8px;
}

.navigation {
    border-bottom: 1px solid #919191;
    -moz-box-shadow: 0 2px 4px #bdbdbd;
    -webkit-box-shadow: 0 2px 4px #bdbdbd;
    box-shadow: 0 2px 4px #bdbdbd;
    position: fixed;
    z-index: 7;
    background-color: #f6f6f6;
    width: 100%;
    margin: 0 auto;
    line-height: 0em;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navigation ul {
    text-align: center;
    line-height: 0;
    margin: 10px 0;
}

.navigation ul li {
    display: inline;
    border-top-style: none;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: all 0.5s;
    -moz-transition: all 0.5s; /* Firefox 4 */
    -webkit-transition: all 0.5s; /* Safari and Chrome */
    -o-transition: all 0.5s; /* Opera */
    border-bottom: 4px solid rgba(167, 4, 0, 0);
    margin-right: 8px;
    margin-left: 8px;
}

.navigation ul li:hover,
.navigation ul li:active {
    display: inline;
    border-bottom: 4px solid #A70400;
}

.navigation li a {
    text-decoration: none;
}

HTML

<div class="navigation">
        <ul>
            <li><a href="#ems">About Me</a></li>
            <li><a href="#ems">Writing Samples</a></li>
            <li><a href="#ems">Musings</a></li>
            <li><a href="#ems">Books</a></li>
        </ul>

    </div>
    <div class="collapse">
        <div class="open"></div>
        <div class="close"></div>
    </div>

Am I blocking the transition speed somehow?

Thanks!

Answer 1

Add the jQuery UI to your page and it’ll allow you to animate class changes (use UI 1.8.22 for jQuery 1.8). Your code will work fine with the UI extension.

Fiddle

Without the UI you can’t animate class changes. You could replace those class changes with animate() passing the top property, like this:

$(".collapse").animate({top: ($('.collapse').css('top') === '-8px') ? 24 : -8}, 'slow');

Fiddle