I am loading div on click with jQuery load method, its working fine but I wanted to add animation like slideUp/slideDown effect, but not sure how to achieve this:
following is the code
$('.search_bar > input').click(function(){
$("#search_layer").load("file-url.html");
$("body").css({"overflow": "hidden", "height": "auto"});
});
Can anyone please suggest how to add slideUp/Down transition, I tried CSS transition as well but no luck
thanks in advance!
Use .load(url, callback) to do stuff after element is loaded. First set it's display: none via css, than do
$('#search_layer').load(
'file-url.html',
function () {
$('#search_layer .div-to-show').slideDown();
}
);
$('.search_bar > input').click(function(){
$("#search_layer").load("file-url.html");
$("#search_layer").slideToggle();
$("body").css({"overflow": "hidden", "height": "auto"});
});
you can use Velocity.js
for example
$(document).on("click", ".search_bar > input", function () {
$(this).velocity("transition.whirlOut", { stagger: 1000, duration: 1000, complete: function () { //on complete... } }); });
you can add a callback function in the load method, and then animate it in the callback :
$('.search_bar > input').click(function(){
$("#search_layer").load("file-url.html",'', animateContent());
$("body").css({"overflow": "hidden", "height": "auto"});
});
function animateContent() {
$("#search_layer").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
}
