SitePoint.com

thelittlemermaid · Nov 2, 2009, 04:28

Hi all

I have a jquery fade in, fade out effect. For that I have used the following js:

I simply have a html file:
<html>
<head>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>

<script type="text/javascript" src="scripts/sample.js"></script>

<script type="text/javascript">

google.setOnLoadCallback( initNews );

</script>
</head>
<body>
<div id="ticker">
<ul>
<li>some...</li>
<li>some...</li>
<li>some...</li>
<li>some...</li>
<li>some...</li>
<li>some...</li>
</ul>
</div>
</body>

Now to this I have applied fade in, fade out effect using:

effect.js
----------
// globale

var index_news = 0;

//

function initNews() {

$('div#ticker')

.slideDown('slow',

function() {

$('div#ticker li').eq( index_news ).fadeIn();

setTimeout( next_news, 5000 );

}

);

}

function next_news() {

$('div#ticker li')

.eq( index_news )

.fadeOut(1000,

function() {

index_news++;

if( index_news> $('div#ticker li').length-1 ) index_news = 0;

$('div#ticker li').eq( index_news ).fadeIn();

setTimeout( next_news, 5000 );

}

);

}

Now what I want is instead of every li fading in and out, I want to show three or four li's at a time and fade in, fade out them or if there are some 25 li's, I want to have a scroll effect but I am unable to change these methods to make anything else work. Please if anyone can help me.

Thanks

rajug · Nov 2, 2009, 04:42

I think it would be easier for you if you can use some paginations plugin available for jquery. I think you can manage with something like this:
http://plugins.jquery.com/project/pagination
http://d-scribe.de/webtools/jquery-p...mo_options.htm

thelittlemermaid · Nov 2, 2009, 21:37

Hi

Can't there be something automatic, so that the user does not need to click. Just simple scrolling. Actually if can get a start and pause thing, it'll b great. I mean the effect i have now is fade in, fade out. If I can apply a start,pause button users can read it at their pace.

thanks for the reply.

Nov 2, 2009, 04:28	#1
thelittlemermaid SitePoint Member Join Date: Oct 2009 Posts: 4	need to change js effect Hi all I have a jquery fade in, fade out effect. For that I have used the following js: I simply have a html file: <html> <head> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript" src="scripts/sample.js"></script> <script type="text/javascript"> google.setOnLoadCallback( initNews ); </script> </head> <body> <div id="ticker"> <ul> <li>some...</li> <li>some...</li> <li>some...</li> <li>some...</li> <li>some...</li> <li>some...</li> </ul> </div> </body> Now to this I have applied fade in, fade out effect using: effect.js ---------- // globale var index_news = 0; // function initNews() { $('div#ticker') .slideDown('slow', function() { $('div#ticker li').eq( index_news ).fadeIn(); setTimeout( next_news, 5000 ); } ); } function next_news() { $('div#ticker li') .eq( index_news ) .fadeOut(1000, function() { index_news++; if( index_news> $('div#ticker li').length-1 ) index_news = 0; $('div#ticker li').eq( index_news ).fadeIn(); setTimeout( next_news, 5000 ); } ); } Now what I want is instead of every li fading in and out, I want to show three or four li's at a time and fade in, fade out them or if there are some 25 li's, I want to have a scroll effect but I am unable to change these methods to make anything else work. Please if anyone can help me. Thanks

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Nov 2, 2009, 04:42	#2
rajug Forever learner - PHP SOAP! Join Date: Oct 2006 Location: Kathmandu, Nepal Posts: 2,828	I think it would be easier for you if you can use some paginations plugin available for jquery. I think you can manage with something like this: http://plugins.jquery.com/project/pagination http://d-scribe.de/webtools/jquery-p...mo_options.htm

Nov 2, 2009, 21:37	#3
thelittlemermaid SitePoint Member Join Date: Oct 2009 Posts: 4	Hi Can't there be something automatic, so that the user does not need to click. Just simple scrolling. Actually if can get a start and pause thing, it'll b great. I mean the effect i have now is fade in, fade out. If I can apply a start,pause button users can read it at their pace. thanks for the reply.