Animation jquery sur liste

**chris52** · 03/12/2015, 16h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 03/12/2015, 17h00

quand tu dis scroll ...
tu veux que ça s'anime en translation, ou juste que les elements changent ?

parce que sur un ul va falloir jouer du margin top des li ...

**chris52** · 03/12/2015, 17h18

le scroll fonctionne, en fait c'est une liste avec les li en float left qui défile. Mais c'est pas ça que je veux ça rend pas très bien, je souhaiterais faire apparaitre chaque élément de ma liste 1 par 1

J'affiche le 1er titre
puis le 2eme
puis le3eme
jusqu'au 20eme
puis je remet le 1er
etc

Mais a chaque fois je viens remplacer l'élément afin d'avoir toujours qu'un seul titre à l'écran

**SpaceFrog** · 07/12/2015, 08h38

avec un setTimeout append le premier li dans le ul ...
http://fiddle.jshell.net/19bwmxxz/

**chris52** · 15/12/2015, 10h58

Merci SpaceFrog

Animation jquery sur liste

jQuery

Vue hybride

Discussions similaires

Partager

Partager