Animation jquery sur liste
Bonjour,
Je cherche à animer une liste contenant 20 titres, avant je souhaiter simplement un défilement donc j'ai utiliser liscroll mais en fait c'est pas top.
Je souhaiterais faire apparaitre chaque élément un par un. Comment faire ?
Voici ce que j'ai:
Code:
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
| <html>
<head>
<title>Test feed rss</title>
<link rel="stylesheet" type="text/css" href="li-scroller.css" />
<meta http-equiv="refresh" content="180" >
</head>
<body>
<div class="tickercontainer0">
<div class="logo"><img src="ca_toulouse.png"/></div>
<div class="tickercontainer">
<div class="mask">
<ul id="ticker01" class="newsticker">
</ul></div>
</div>
</div>
</div>
</body>
<!-- jquery -->
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<script>
'use strict';
$.Feed = {};
$(function(){
initialise();
});
// c'est des params pour avoir un feeder ça fais peur mais ça marche a priori
$.options = {
ssl: false,
host: 'www.feedrapp.info', // don't touch
limit: 20,
key: null,
tokens: {},
outputMode: 'json',
dateFormat: 'dddd MMM Do',
effect: 'show',
offsetStart: false,
offsetEnd: false,
error: function () {
console.log('jQuery RSS: url doesn\'t link to RSS-Feed');
},
onData: function () {},
success: function () {}
};
// initialise
var initialise = function(){
crossDomain('http://www.neoscreen.fr/meteo/rss/france.xml', function(result){
if(result.responseStatus == 200){
$.Feed = result.responseData.feed;
bind(function(){
//$('ul#ticker01').liScroll(); <- ici je veux mettre une autre animation à la place
});
}else{
console.error(result.responseDetail);
}
});
};
/**
* bind
*/
var bind = function(callback){
_.forEach($.Feed.entries, function(article){
$('#ticker01').append('<li><a href="#">'+ article.title +'<font color="red" size="6"> ||</font></li>');
});
callback();
};
/**
* crossDomain
*/
var crossDomain = function (url ,callback) {
var apiProtocol = 'http' + ($.options.ssl ? 's' : '');
var apiHost = apiProtocol + '://' + $.options.host;
var apiUrl = apiHost + '?callback=?&q=' + encodeURIComponent(url);
if ($.options.offsetStart && $.options.offsetEnd) {
$.options.limit = $.options.offsetEnd;
}
if ($.options.limit !== null) {
apiUrl += '&num=' + $.options.limit;
}
if ($.options.key !== null) {
apiUrl += '&key=' + $.options.key;
}
$.getJSON(apiUrl, callback);
};
</script>
</html> |
