CODEWITHSUNDEEP
javascriptjqueryhtmlslidetoggle
davvv
davvv

Reputation: 802

How to specify different duration for slideUp and slideDown in jquery slideToggle?

I want a full width panel to slide down from the top of the browser, that will display my contact details, along with social links etc: 

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle();
  });
});
#flip {
  padding: 5px;
  width: 300px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
  display: none;
  width: 100%;
  height: 200px;
  z-index: 5000;
  background-color: black;
}
.f {
  position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
  <span class="f">MENU</span>
</div>

This works a treat, but how can I specify different times for slide up and slidedown?

Upvotes: 1

Views: 2800

Answers (5)

Mohammad
Mohammad

Reputation: 21499

You can store duration of animation in variable and use it. In function of callback of slideToggle() change duration.

var duration = 500;
$("#flip").click(function() {
  $("#panel").slideToggle(duration, function(){
    duration = $(this).is(":visible") ? 2000 : 500;
  });
});


var duration = 500;
$("#flip").click(function() {
  $("#panel").slideToggle(duration, function(){
    duration = $(this).is(":visible") ? 2000 : 500;
  });
});
#flip {
  width: 300px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  display: none;
  width: 100%;
  height: 150px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
  <span class="f">MENU</span>
</div>

Upvotes: 2

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

EDIT

I have edit my answer to reflect the change in the question.

Use slideDown() and slideUp() instead.

CODEPEN

http://codepen.io/alexincarnati/pen/PWOPjY

In case you want to add different durations to sliding up and down in jQuery then you can simply add a flag and check if the menu is opened or not and then use slideDown() and slideUp() as methods. That way you could add different durations to the slide.

$(document).ready(function() {
  var menuOpened = false;

  $("#flip").click(function() {

    if (menuOpened === false) {
      $("#panel").slideDown(1000, function() {
        menuOpened = true;
      });

    } else {
      $("#panel").slideUp(700, function() {
        menuOpened = false;
      });

    }
  });
});

Upvotes: 2

Ionut Necula
Ionut Necula

Reputation: 11480

Simply just add the time as a parameter to the slideToggle method.

You can see in the docs this:

slideToggle( [duration ] [, complete ] )

duration (default: 400) Type: Number or String A string or number determining how long the animation will run.

complete Type: Function() A function to call once the animation is complete, called once per matched element.

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle(3000);
  });
});
#flip {
  padding: 5px;
  width: 300px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
  display: none;
  width: 100%;
  height: 200px;
  z-index: 5000;
  background-color: black;
}
.f {
  position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
  <span class="f">MENU</span>
</div>

You can read more in the official documentation here.

UPDATE:

If you want to have different durations for slideUp() and slideDown() methods you can do something like this:

$(document).ready(function() {
  var check_state = false;
  $("#flip").click(function() {
    if (check_state === false) {
      $("#panel").stop().slideDown(3000);
      check_state = true;
    } else {
      $("#panel").stop().slideUp(1500);
      check_state = false;
    }
  });
});
#flip {
  padding: 5px;
  width: 300px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
  display: none;
  width: 100%;
  height: 200px;
  z-index: 5000;
  background-color: black;
}
.f {
  position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
  <span class="f">MENU</span>
</div>

Upvotes: 1

Dipiks
Dipiks

Reputation: 3928

You can read about .slideToggle() on jquery documentation As it say the slideToggle() function accept two parameters:

.slideToggle( [duration ] [, complete ] )

The first is for the duration (in millisecond) and the second is the callback after the animation is complete

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle(5000 /* Here is the duration of the animation in MS */, function() {
        //Do what you want here
    });
  });
});
#flip {
  padding: 5px;
  width: 300px;
  text-align: center;
  background-color: #e5eecc;
  border: solid 1px #c3c3c3;
}
#panel {
  padding: 50px;
  display: none;
  width: 100%;
  height: 200px;
  z-index: 5000;
  background-color: black;
}
.f {
  position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">Hello world!</div>
<div id="flip">
  <span class="f">MENU</span>
</div>

Upvotes: 0

Dave Plug
Dave Plug

Reputation: 1079

You can specify the time in the first parameter of the function slideToggle:

$("#panel").slideToggle(4000);

Upvotes: 0

Related Questions