Text Slider with animation in jquery

Text Slider with animation in jquery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><br />
<script src="http://artifexonline.dyndns.biz:8081/projects/wp_yourrighthand/code/wp-content/themes/yourrighthand/js/jquery.bxslider.min.js" type="text/javascript"></script>

<script>
jQuery(document).ready(function() {
$('.testimonials-slider').bxSlider({
mode: 'fade',
slideWidth: 400,
minSlides: 1,
maxSlides: 1,
slideMargin: 100,
pause: 9000,
auto: false,
stopAuto: false,

});
});
</script>
<script src="jquery.easing.1.3.min.js"></script>
<script>
$(document).ready(function() {
$("#text-slidein")
.animate({
width:500,
marginLeft:20
}, 2000, function() {
$("#text-slidein2")
.animate({
width:500,
marginLeft:50
}, 4000, function() {

$("#text-slidein3")
.animate({
width:500,
marginLeft:100
}, 3000, function() {

});
});
});
});
</script>

<style>

#text-slidein {
top: 100px;
font-family: Arial, Helvetica, sans-serif;
color: #888;
font-size: 17px;
padding: 15px 0;
width: 0px;
height:8px;
position: absolute;
overflow:hidden;
margin-left:-800px
}
#text-slidein2 {
top: 120px;
font-family: Arial, Helvetica, sans-serif;
color: #888;
font-size: 17px;
padding: 15px 0;
width: 0px;
height:8px;
position: absolute;
overflow:hidden;
margin-left:-800px
}
#text-slidein3 {
top: 140px;
font-family: Arial, Helvetica, sans-serif;
color: #888;
font-size: 17px;
padding: 15px 0;
width: 0px;
height:8px;
position: absolute;
overflow:hidden;
margin-left:-800px
}

</style>
<div class="testimonials-slider">
<div class="slide">

<div id="text-slidein">A global engineering design firm whose 30-year history includes the most recognized building in the world.</div>
<div id="text-slidein2">b global engineering design firm whose 30-year history includes the most recognized building in the world.</div>
<div id="text-slidein3">c global engineering design firm whose 30-year history includes the most recognized building in the world.</div>
</div>
<div class="slide">

<img alt="" src="http://artifexonline.dyndns.biz:8081/projects/wp_yourrighthand/code/wp-content/uploads/2013/12/home-col-left-img.png" class="grph">
</div>
</div>



jquery.easing.1.3.min.js

jQuery.easing["jswing"]=jQuery.easing["swing"];jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(a,b,c,d,e){return jQuery.easing[jQuery.easing.def](a,b,c,d,e)},easeInQuad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeOutQuad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeInOutQuad:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b+c;return-d/2*(--b*(b-2)-1)+c},easeInCubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeOutCubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeInOutCubic:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b+c;return d/2*((b-=2)*b*b+2)+c},easeInQuart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeOutQuart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeInOutQuart:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b+c;return-d/2*((b-=2)*b*b*b-2)+c},easeInQuint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeOutQuint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeInOutQuint:function(a,b,c,d,e){if((b/=e/2)<1)return d/2*b*b*b*b*b+c;return d/2*((b-=2)*b*b*b*b+2)+c},easeInSine:function(a,b,c,d,e){return-d*Math.cos(b/e*(Math.PI/2))+d+c},easeOutSine:function(a,b,c,d,e){return d*Math.sin(b/e*(Math.PI/2))+c},easeInOutSine:function(a,b,c,d,e){return-d/2*(Math.cos(Math.PI*b/e)-1)+c},easeInExpo:function(a,b,c,d,e){return b==0?c:d*Math.pow(2,10*(b/e-1))+c},easeOutExpo:function(a,b,c,d,e){return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c},easeInOutExpo:function(a,b,c,d,e){if(b==0)return c;if(b==e)return c+d;if((b/=e/2)<1)return d/2*Math.pow(2,10*(b-1))+c;return d/2*(-Math.pow(2,-10*--b)+2)+c},easeInCirc:function(a,b,c,d,e){return-d*(Math.sqrt(1-(b/=e)*b)-1)+c},easeOutCirc:function(a,b,c,d,e){return d*Math.sqrt(1-(b=b/e-1)*b)+c},easeInOutCirc:function(a,b,c,d,e){if((b/=e/2)<1)return-d/2*(Math.sqrt(1-b*b)-1)+c;return d/2*(Math.sqrt(1-(b-=2)*b)+1)+c},easeInElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e)==1)return c+d;if(!g)g=e*.3;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return-(h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g))+c},easeOutElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e)==1)return c+d;if(!g)g=e*.3;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);return h*Math.pow(2,-10*b)*Math.sin((b*e-f)*2*Math.PI/g)+d+c},easeInOutElastic:function(a,b,c,d,e){var f=1.70158;var g=0;var h=d;if(b==0)return c;if((b/=e/2)==2)return c+d;if(!g)g=e*.3*1.5;if(h<Math.abs(d)){h=d;var f=g/4}else var f=g/(2*Math.PI)*Math.asin(d/h);if(b<1)return-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c;return h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)*.5+d+c},easeInBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;return d*(b/=e)*b*((f+1)*b-f)+c},easeOutBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;return d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeInOutBack:function(a,b,c,d,e,f){if(f==undefined)f=1.70158;if((b/=e/2)<1)return d/2*b*b*(((f*=1.525)+1)*b-f)+c;return d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeInBounce:function(a,b,c,d,e){return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c},easeOutBounce:function(a,b,c,d,e){if((b/=e)<1/2.75){return d*7.5625*b*b+c}else if(b<2/2.75){return d*(7.5625*(b-=1.5/2.75)*b+.75)+c}else if(b<2.5/2.75){return d*(7.5625*(b-=2.25/2.75)*b+.9375)+c}else{return d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}},easeInOutBounce:function(a,b,c,d,e){if(b<e/2)return jQuery.easing.easeInBounce(a,b*2,0,d,e)*.5+c;return jQuery.easing.easeOutBounce(a,b*2-e,0,d,e)*.5+d*.5+c}})

ex2
---------------

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.easing.1.3.min.js"></script>
<div id="content">

<div id="content-wraper">
<div id="logo-content">
<div id="me-logo"><a href="./"></a></div>
</div>

<div id="dynamic-content">
<ul id="row-top">
<li id="top-1"><img src="img/1.jpg" class="fade" width="265" height="245" alt="" /></li>
<li id="top-2"><img src="img/2.jpg" width="265" height="245" alt="" /></li>
<li id="top-3"><img src="img/3.jpg" width="265" height="245" alt="" /></li>
</ul>

<div id="text-slidein">A global engineering design firm whose 30-year history includes the most recognized building in the world.</div>

<ul id="row-btm">
<li id="btm-1"><img src="img/4.jpg" class="fade" width="265" height="245" alt="" /></li>
<li id="btm-2"><img src="img/5.jpg" class="fade" width="265" height="245" alt="" /></li>
<li id="btm-3"><img src="img/6.jpg" width="265" height="245" alt="" /></li>
</ul>

</div>

<div id="menu-nav">
<ul>
<li><a href="#">Practice</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Focus</a></li>
<li><a href="#">Recognition</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div id="news-box">
<p>News</p>
<p> </p>
<p>Today is a beautiful day.</p>
<p><br />
We are having a ball.</p>
<p><br />
Insomnia is no news.</p>
</div>
</div>
</div>

<script>
$(document).ready(function() {
$("#top-2").animate({
"top": "0px"
}, 1500, 'easeOutExpo');
$("#btm-2").animate({
"top": "0px"
}, 1500, 'easeOutExpo', function() {
$("#top-1").animate({
"top": "0px"
}, 1500, 'easeOutExpo');
$("#btm-1").animate({
"top": "0px"
}, 1500, 'easeOutExpo', function() {
$("#top-3").animate({
"top": "0px"
}, 1500, 'easeOutExpo');
$("#btm-3").animate({
"top": "0px"
}, 1500, 'easeOutExpo', function() {
$("#row-top").animate({
"top": "-25"
}, 1000, 'easeOutExpo');
$("#row-btm").animate({
"top": "25px"
}, 1000, 'easeOutExpo');

$("#text-slidein")
.animate({
width:800,
marginLeft:0
}, 2000, function() {
$(".fade").fadeOut(1000, function() {
$("#menu-nav").fadeIn(1000);
$("#news-box").fadeIn(1000);
});
});
});
});
});
});
</script>
<select name="images[1][info][0][easing]">
<option selected="" value="easeOutBack">easeOutBack</option>
<option value="easeInQuad">easeInQuad</option>
<option value="easeOutQuad">easeOutQuad</option>
<option value="easeInOutQuad">easeInOutQuad</option>
<option value="easeInCubic">easeInCubic</option>
<option value="easeOutCubic">easeOutCubic</option>
<option value="easeInOutCubic">easeInOutCubic</option>
<option value="easeInQuart">easeInQuart</option>
<option value="easeOutQuart">easeOutQuart</option>
<option value="easeInOutQuart">easeInOutQuart</option>
<option value="easeInQuint">easeInQuint</option>
<option value="easeOutQuint">easeOutQuint</option>
<option value="easeInOutQuint">easeInOutQuint</option>
<option value="easeInSine">easeInSine</option>
<option value="easeOutSine">easeOutSine</option>
<option value="easeInOutSine">easeInOutSine</option>
<option value="easeInExpo">easeInExpo</option>
<option value="easeOutExpo">easeOutExpo</option>
<option value="easeInOutExpo">easeInOutExpo</option>
<option value="easeInCirc">easeInCirc</option>
<option value="easeOutCirc">easeOutCirc</option>
<option value="easeInOutCirc">easeInOutCirc</option>
<option value="easeInElastic">easeInElastic</option>
<option value="easeOutElastic">easeOutElastic</option>
<option value="easeInOutElastic">easeInOutElastic</option>
<option value="easeInBack">easeInBack</option>
<option value="easeInOutBack">easeInOutBack</option>
<option value="easeInBounce">easeInBounce</option>
<option value="easeOutBounce">easeOutBounce</option>
<option value="easeInOutBounce">easeInOutBounce</option> </select>
<style>
body {
margin-left: 0px;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
color: #666;
margin-top: 40px;
}
p {
margin: 0;
padding: 0;
}
#content {
width: 970px;
margin: 0 auto;
overflow: hidden;
height: 491px;
}
#content-wraper {
}
#logo-content {
float: left;
width: 169px;
border-left: solid #AAA 1px;
height: 491px;
}
#me-logo {
background-image: url(structure/me-logo.png);
width: 86px;
height: 52px;
position: relative;
top: 200px;
left: 46px;
}
#me-logo a {
display: block;
height: 52px;
}
#dynamic-content {
float: right;
width: 800px;
height: 491px;
overflow: hidden;
}
#row-top {
}
#dynamic-content ul {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
#dynamic-content li {
display: inline;
float: left;
padding: 0 1px 1px 0;
width: 265px;
height: 245px;
}
#row-top {
position: relative;
}
#row-btm {
position: relative;
}
#top-1 {
top: -245px;
position: relative;
}
#btm-1 {
position: relative;
top: 246px;
}
#top-2 {
top: -245px;
position: relative;
}
#btm-2 {
position: relative;
top: 245px;
background-color: #6EA823;
}
#top-3 {
top: -245px;
position: relative;
}
#btm-3 {
position: relative;
top: 245px;
}
#footer {
width: 970px;
margin: 0 auto;
padding-top: 40px;
font-family: Verdana, Geneva, sans-serif;
font-size: 8px;
text-transform: uppercase;
color: #6EA823;
text-align: right;
}

#text-slidein {
top: 260px;
font-family: Arial, Helvetica, sans-serif;
color: #888;
font-size: 17px;
padding: 15px 0;
width: 0px;
height:8px;
position: absolute;
overflow:hidden;
margin-left:-800px
}
#menu-nav {
position: relative;
z-index: 1000;
width: 120px;
display: none;
left: 170px;
top: -210px;
}
#menu-nav ul {
list-style: none;
list-style-type: none;
display: block;
padding: 0;
margin: 0;
}
#menu-nav li {
color: #6EA823;
font-family: Verdana, Geneva, sans-serif;
text-transform: uppercase;
display: block;
padding: 5px 0;
}
#menu-nav ul li a {
text-decoration: none;
color: #6EA823;
display: block;
}
#menu-nav ul li a:hover {
color: #333333;
display: block;
}
#news-box {
width: 235px;
height: 190px;
color: #FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
padding: 15px;
text-shadow: 1px 1px 1px #777;
left: 436px;
z-index: 2000;
position: relative;
top: -376px;
display: none;
}
</style>

Comments