slideUp function:
The .slideUp() method animates the height of the matched elements. This causes lower parts of the page to slide up, appearing to conceal the items.can be supplied to indicate durations of 200 and 600 milliseconds,
Demo link :
http://freeteachnology.hol.es/slideup/
Code link :
https://drive.google.com/open?id=0BxmTZPVcu72fOVJ0dUU0dElQRnM
Syntax :
$(element).slideUp(speed,easing,callback);
follwoing parameterr of slideUp element :
1-spedd,
2-easing,
3-callback,
1-speed :
specifies speed of slide up effects,
speed used milesecond,slow,fast parameter pass
2-easing :specify speed of slideup element
1-swing-move slower at the begining/end but faster at middle,
2-linear – constant speed.
3-callback : slide up function excuted call callback function.
Follwoing file structure create :
1-header.php,
2-footer.php,
3-index.php
1-header.php file include bootstrap links well as jquery link,
Code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery slideUp() function</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!-- start:header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Free Teachnology</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only"></span></a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</br></br></br>
<!-- end:header -->
2-footer.php :
footer.php file include bootstrap css link
Code :
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Start::footer -->
<footer>
<div class="footer footer-bottom">
<div class="container">
<div class="text-muted ">
<a href="https://freeteachnology.blogspot.in/" >Free Teachnology</a>
</div>
<p class="pull-left"> Copyright © <?php echo date('Y');?>. Design and Develop by - Disuza Jen. </p>
<div class="pull-right">
<ul class="nav nav-pills payments">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-link"></i></li>
</ul>
</div>
</div>
</div>
<!--/.footer-bottom-->
</footer>
<!-- End::footer -->
<style type="text/css">
.footer-bottom {
margin-top:220px;
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom p.pull-left {
padding-top: 6px;
}
</style>
</body>
</html>
3-index.php
index.php files slideup function call slide up function work as only one hide the html element but can’t show element of html , same opposite function is slideDown() in jquery to show the element.
<?php include('header.php'); ?>
<body>
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
<strong>Hi..</strong> jQuery slideUp() fucntion.
</div>
<div class="alert alert-warning">
<a href="https://drive.google.com/open?id=0BxmTZPVcu72fV2NMeS1FQkZ0ZWs" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>
<strong> Code download link-</strong>
</div>
<div class="span2">
<div class="btn-group">
<a class="btn btn-info jqueryShow" href="javascript:void(0)">
slideUp
</a>
</div>
</div>
<br><br>
<div class="container-fluid well span3 jqueryToggle" >
<div class="row">
<div class="col-lg-3">
<h3>Disuza Jen</h3>
<h6>Email: disuzajen@gmail.com</h6>
<h6>Country: India</h6>
</div>
</div>
</div>
<p></p>
</div>
</br>
<?php include('footer.php'); ?>
<script>
$('.jqueryShow').click(function()
{
//call slide up function::
$('.jqueryToggle').slideUp("slow",function(){
$('p').text('slideUp function call.');
});
});
</script>
Comments