I have images that fade in an out in the background. I've put them in functions.

When clicking on a button I want them all to fade and stop running.

I find no way of doing this.

I have tried using stop(), clearQueue() and finish() in different ways but nothing works? 

This is my code:

2. function aniBG2() {
3.       bg2.delay(4000).animate({ opacity: 1,
4.       }, 10000, function() {
5. 
   
6.             bg3.animate({ opacity: 1,
7.             }, 10000, function() {
8. 
   
9.                   bg3.delay(5000).animate({ opacity: 0,
10.       }, 10000, function() {
11. 
    
12.             bg2.animate({ opacity: 0,
13.                   }, 10000, function() {
14.                         aniBG2();
15.                   });
16.             });
17.          });
18.   });
19. }
20. function aniBG4() {
21.       bg4.delay(7000).animate({ opacity: 1,
22.       }, 10000, function() {
23. 
    
24.             bg4.delay(4000).animate({ opacity: 0,
25.              }, 10000, function() {
26.                   aniBG4();
27.             });
28.       });
29. }
30. function aniBG5() {
31. bg5.delay(2000).animate({
32.     opacity: 1,
33. }, 10000, function() {
34. 
    
35. bg5.delay(6000).animate({
36.     opacity: 0,
37. }, 10000, function() {
38. aniBG5();
39.   });
40.   });
41. }
42. 
    
43. 
    
44. 
    
45. $('#logo').on('click', function(e){
46. bg2.stop(true,true).animate({opacity: 0}, function() {
47.             bg2.clearQueue().finish();
48.       });
49. bg3.stop(true,true).animate({opacity: 0}, function() {
50.             bg3.clearQueue().finish();
51.       });
52. bg4.stop(true,true).animate({opacity: 0}, function() {
53.             bg4.clearQueue().finish();
54.       });
55. bg5.stop(true,true).animate({opacity: 0}, function() {
56.             bg5.clearQueue().finish();
57.       });
58. });

Grateful for help.