mkessler Posted November 10, 2010 Share Posted November 10, 2010 Need help fading the edges of my jquery newsticker so it looks as if the text is fading in and out of the page as it scrolls. Anyone know how to accomplish this?Script: jQuery.fn.liScroll = function(settings) { settings = jQuery.extend({ travelocity: 0.07 }, settings); return this.each(function(){ var $strip = jQuery(this); $strip.addClass("newsticker") var stripWidth = 0; var $mask = $strip.wrap("<div class='mask'></div>"); var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>"); var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width $strip.find("li").each(function(i){ stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar }); $strip.width(stripWidth); var totalTravel = stripWidth+containerWidth; var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye function scrollnews(spazio, tempo){ $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);}); } scrollnews(totalTravel, defTiming); $strip.hover(function(){ jQuery(this).stop(); }, function(){ var offset = jQuery(this).offset(); var residualSpace = offset.left + stripWidth; var residualTime = residualSpace/settings.travelocity; scrollnews(residualSpace, residualTime); }); }); }; Call: $(function(){ $("ul#ticker01").liScroll(); }); Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.