You can use for these effects using jQuery animate() function.
Copy this code and paste in your page.
<html lang="en">
<head>
<title>How to make a div slide left to right onlick using Jquery</title>
<style type="text/css">
.box{
float:left;
overflow: hidden;
background: #f0e68c;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var boxWidth = $(".box").width();
$(".slide-left").click(function(){
$(".box").animate({
width: 0
});
});
$(".slide-right").click(function(){
$(".box").animate({
width: boxWidth
});
});
});
</script>
</head>
<body>
<button class="slide-left" type="button">Slide Left</button>
<button class="slide-right" type="button">Slide Right</button>
<hr />
<div class="box">
<div class="box-inner">
make a div slide left to right using Jquery Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. </div>
</div>
</body>
</html>
DEMO:
How to make a div slide left to right onlick using Jquery
Copy this code and paste in your page.
<html lang="en">
<head>
<title>How to make a div slide left to right onlick using Jquery</title>
<style type="text/css">
.box{
float:left;
overflow: hidden;
background: #f0e68c;
}
/* Add padding and border to inner content
for better animation effect */
.box-inner{
width: 400px;
padding: 10px;
border: 1px solid #a29415;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var boxWidth = $(".box").width();
$(".slide-left").click(function(){
$(".box").animate({
width: 0
});
});
$(".slide-right").click(function(){
$(".box").animate({
width: boxWidth
});
});
});
</script>
</head>
<body>
<button class="slide-left" type="button">Slide Left</button>
<button class="slide-right" type="button">Slide Right</button>
<hr />
<div class="box">
<div class="box-inner">
make a div slide left to right using Jquery Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. </div>
</div>
</body>
</html>
DEMO:
make a div slide left to right using Jquery Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.
No comments:
Post a Comment