[英]How can we give a simple slider fadein and fadeout effect?
How can we give a simple slider fadein and fadeout effect. 我们如何才能给出简单的滑块淡入淡出效果。
Running simple slider Link : http://ivyfa.advisorproducts.com/home 运行简单的滑块链接: http : //ivyfa.advisorproducts.com/home
Below is the js used: 下面是使用的js:
/*----------Slider---------------*/
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'images/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
left:0
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
Can we add some extra functionality of fadein fadeout along with this jquery slider? 我们是否可以与此jQuery滑块一起添加淡入淡出的一些额外功能?
Thanks Sushil 感谢Sushil
I have added opacity to both start animation and stop animation and it works :) 我已经为开始动画和停止动画都添加了不透明度,并且可以使用:)
Below is the updated code: 下面是更新的代码:
$(function(){
$('#slides').slides({
preload: true,
preloadImage: '/pages/images/loading.gif',
play: 6000,
pause: 3000,
hoverPause: true,
animationStart: function(current){
$('.caption, .slide img').animate({
left: 0,
opacity: 0.5 //Added this opacity
}, 100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption, .slide img').animate({
bottom:0,
opacity: 1 //Added this opacity
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption, .slide img').animate({
bottom:0
},200);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.