CrossFading help
Ik heb een klein scriptje gevonden wat gebruikt wordt voor een newsticker. Deze wilde ik ook gaan gebruiken en dus een beetje manipuleren, zodat ik die ook kan gebruiken voor een kleine crossfade image slider.
Hij doet het wel, maar hij fade eerst helemaal uit, voordat hij de nieuwe image infade. Deze moet nu in elkaar overgaan.
Wie kan me helpen??
Het script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
default:
case 'fade':
// fade out active div
children.each(function() {
if(!$(this).hasClass(options.activeClass)) {
$(this).hide();
}
});
active.fadeOut(options.effectTime, function() {
active.removeClass(options.activeClass);
next.fadeIn(options.effectTime, function() {
next.addClass(options.activeClass);
resetTimer();
})
})
break;
case 'fade':
// fade out active div
children.each(function() {
if(!$(this).hasClass(options.activeClass)) {
$(this).hide();
}
});
active.fadeOut(options.effectTime, function() {
active.removeClass(options.activeClass);
next.fadeIn(options.effectTime, function() {
next.addClass(options.activeClass);
resetTimer();
})
})
break;
Code (php)
1
2
3
4
5
6
2
3
4
5
6
active.fadeOut(options.effectTime)
next.fadeIn(options.effectTime, function() {
active.removeClass(options.activeClass);
next.addClass(options.activeClass);
resetTimer();
})
next.fadeIn(options.effectTime, function() {
active.removeClass(options.activeClass);
next.addClass(options.activeClass);
resetTimer();
})
@vincent Huisman
Ter verduidelijking, hier de gehele js code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
(function($){
$.fn.extend({
Slide: function(options) {
var defaults = {
showTime: 6000,
childDivClass: 'content_slide',
activeClass: 'activeSlide',
effect: 'fade',
effectTime: 500
}
var options = $.extend(defaults, options);
var obj = $(this);
var childLength = obj.children('.'+options.childDivClass).length;
var children = obj.children('.'+options.childDivClass)
var firstChild = obj.children('.'+options.childDivClass+':first');
var t;
return this.each(function() {
if(childLength > 1) {
var el = obj.children('.'+options.childDivClass+':first');
el.addClass(options.activeClass);
startTimer();
}
});
function startTimer(){
var delay = options.showTime;
t = setTimeout(function() {
showSlide();
}, delay);
}
function resetTimer(){
clearTimeout(t);
startTimer();
}
function showSlide() {
var active = obj.children('.'+options.activeClass);
var next = active.next();
if(next.length == 0) {
next = firstChild;
}
switch(options.effect) {
default:
case 'fade':
// fade out active div
children.each(function() {
if(!$(this).hasClass(options.activeClass)) {
$(this).hide();
}
});
active.fadeOut(options.effectTime, function() {
active.removeClass(options.activeClass);
next.fadeIn(options.effectTime, function() {
next.addClass(options.activeClass);
resetTimer();
})
})
break;
case 'slide':
// slide active div up
var i = 0;
children.each(function() {
if($(this).css('position') != 'relative') {
if ($(this).hasClass(options.activeClass)) {
$(this).css('position', 'relative').css('top', '0px').attr('rel', i);
}
else {
var t = 500 - i * 500;
$(this).css('position', 'relative').css('top', t+'px').attr('rel', i);
}
i++;
}
})
active.animate({
top: parseInt(active.css('top').replace('px', '')) - 500
}, options.effectTime, 'swing', function() {
var t = 500 - parseInt(active.attr('rel')) * 500;
active.css('top', t+'px');
});
next.animate({
top: parseInt(next.css('top').replace('px', '')) - 500
}, options.effectTime, 'swing', function() {
active.removeClass(options.activeClass);
next.addClass(options.activeClass);
resetTimer();
});
break;
}
}
}
});
})(jQuery);
$.fn.extend({
Slide: function(options) {
var defaults = {
showTime: 6000,
childDivClass: 'content_slide',
activeClass: 'activeSlide',
effect: 'fade',
effectTime: 500
}
var options = $.extend(defaults, options);
var obj = $(this);
var childLength = obj.children('.'+options.childDivClass).length;
var children = obj.children('.'+options.childDivClass)
var firstChild = obj.children('.'+options.childDivClass+':first');
var t;
return this.each(function() {
if(childLength > 1) {
var el = obj.children('.'+options.childDivClass+':first');
el.addClass(options.activeClass);
startTimer();
}
});
function startTimer(){
var delay = options.showTime;
t = setTimeout(function() {
showSlide();
}, delay);
}
function resetTimer(){
clearTimeout(t);
startTimer();
}
function showSlide() {
var active = obj.children('.'+options.activeClass);
var next = active.next();
if(next.length == 0) {
next = firstChild;
}
switch(options.effect) {
default:
case 'fade':
// fade out active div
children.each(function() {
if(!$(this).hasClass(options.activeClass)) {
$(this).hide();
}
});
active.fadeOut(options.effectTime, function() {
active.removeClass(options.activeClass);
next.fadeIn(options.effectTime, function() {
next.addClass(options.activeClass);
resetTimer();
})
})
break;
case 'slide':
// slide active div up
var i = 0;
children.each(function() {
if($(this).css('position') != 'relative') {
if ($(this).hasClass(options.activeClass)) {
$(this).css('position', 'relative').css('top', '0px').attr('rel', i);
}
else {
var t = 500 - i * 500;
$(this).css('position', 'relative').css('top', t+'px').attr('rel', i);
}
i++;
}
})
active.animate({
top: parseInt(active.css('top').replace('px', '')) - 500
}, options.effectTime, 'swing', function() {
var t = 500 - parseInt(active.attr('rel')) * 500;
active.css('top', t+'px');
});
next.animate({
top: parseInt(next.css('top').replace('px', '')) - 500
}, options.effectTime, 'swing', function() {
active.removeClass(options.activeClass);
next.addClass(options.activeClass);
resetTimer();
});
break;
}
}
}
});
})(jQuery);
Gewijzigd op 07/09/2011 15:51:11 door Casper B