我正在使用vTicker，它工作正常，但是在项目循环执行之后，它们将丢失基于伪类的css属性。想法是让第一个和最后一个孩子具有相同的不透明度，第二个和倒数第二个以及最后一个，等等，中间项目的不透明度为100％。
我已经研究过添加类来控制它，例如：
<ul>
<li class="item-1">Text</li>
<li class="item-2">Text</li>
</ul>
但是，一旦item-1循环通过，它就会在保留类名的同时到达列表的底部。我需要类名称“ item-1”以始终与列表中的第一项保持在一起，即使在vTicker重新排序之后也是如此。
我将如何处理？这是vTicker的代码：
/*! vTicker 1.14
http://richhollis.github.com/vticker/ | http://richhollis.github.com/vticker/license/ | based on Jubgits vTicker http://www.jugbit.com/jquery-vticker-vertical-news-ticker/ */
(function(d){var m={speed:700,pause:4E3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},c={moveUp:function(a,b){c.animate(a,b,"up")},moveDown:function(a,b){c.animate(a,b,"down")},animate:function(a,b,e){var c=a.itemHeight,f=a.options,g=a.element.children("ul"),k="up"===e?"li:first":"li:last",l=g.children(k).clone(!0);0<f.height&&(c=g.children("li:first").height());c+=f.margin+2*f.padding;"down"===e&&g.css("top","-"+c+"px").prepend(l);if(b&&b.animate){if(a.animating)return;
a.animating=!0;g.animate("up"===e?{top:"-="+c+"px"}:{top:0},f.speed,function(){d(g).children(k).remove();d(g).css("top","0px");a.animating=!1})}else g.children(k).remove(),g.css("top","0px");"up"===e&&l.appendTo(g)},nextUsePause:function(){var a=d(this).data("state"),b=a.options;a.isPaused||2>a.itemCount||f.next.call(this,{animate:b.animate})},startInterval:function(){var a=d(this).data("state"),b=this;a.intervalId=setInterval(function(){c.nextUsePause.call(b)},a.options.pause)},stopInterval:function(){var a=
d(this).data("state");a&&(a.intervalId&&clearInterval(a.intervalId),a.intervalId=void 0)},restartInterval:function(){c.stopInterval.call(this);c.startInterval.call(this)}},f={init:function(a){f.stop.call(this);var b=jQuery.extend({},m);a=d.extend(b,a);var b=d(this),e={itemCount:b.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:b,animating:!1,options:a,isPaused:a.startPaused?!0:!1,pausedByCode:!1};d(this).data("state",e);b.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",
margin:0,padding:0}).children("li").css({margin:a.margin,padding:a.padding});isNaN(a.height)||0===a.height?(b.children("ul").children("li").each(function(){var a=d(this);a.height()>e.itemHeight&&(e.itemHeight=a.height())}),b.children("ul").children("li").each(function(){d(this).height(e.itemHeight)}),b.height((e.itemHeight+(a.margin+2*a.padding))*a.showItems+a.margin)):b.height(a.height);var h=this;a.startPaused||c.startInterval.call(h);a.mousePause&&b.bind("mouseenter",function(){!0!==e.isPaused&&
(e.pausedByCode=!0,c.stopInterval.call(h),f.pause.call(h,!0))}).bind("mouseleave",function(){if(!0!==e.isPaused||e.pausedByCode)e.pausedByCode=!1,f.pause.call(h,!1),c.startInterval.call(h)})},pause:function(a){var b=d(this).data("state");if(b){if(2>b.itemCount)return!1;(b.isPaused=a)?d(this).addClass("paused"):d(this).removeClass("paused")}},next:function(a){var b=d(this).data("state");if(b){if(b.animating||2>b.itemCount)return!1;c.restartInterval.call(this);c.moveUp(b,a)}},prev:function(a){var b=
d(this).data("state");if(b){if(b.animating||2>b.itemCount)return!1;c.restartInterval.call(this);c.moveDown(b,a)}},stop:function(){d(this).data("state")&&c.stopInterval.call(this)}};d.fn.vTicker=function(a){if(f[a])return f[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"!==typeof a&&a)d.error("Method "+a+" does not exist on jQuery.vTicker");else return f.init.apply(this,arguments)}})(jQuery);
最佳答案
我是vTicker的作者。
我在Webkit中看到了相同的行为，如果这是一个Webkit错误，则可能很快将无法修复！
我的建议是在vTicker中添加一些事件（在代码动画前后），然后使用jQuery设置所需的效果。
看看这个：
http://jsfiddle.net/v6Znq/2/
/*
Vertical News Ticker 1.15 (pre-release)
Original by: Tadas Juozapaitis ( kasp3rito [eta] gmail (dot) com )
http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
Forked/Modified by: Richard Hollis @richhollis - richhollis.co.uk
*/
(function($){
var defaults = {
speed: 700,
pause: 4000,
showItems: 1,
mousePause: true,
height: 0,
animate: true,
margin: 0,
padding: 0,
startPaused: false
};
var internal = {
moveUp: function(state, attribs) {
internal.animate(state, attribs, 'up');
},
moveDown: function(state, attribs){
internal.animate(state, attribs, 'down');
},
animate: function(state, attribs, dir) {
var height = state.itemHeight;
var options = state.options;
var el = state.element;
var obj = el.children('ul');
var selector = (dir === 'up') ? 'li:first' : 'li:last';
state.element.trigger("vticker.beforeTick");
var clone = obj.children(selector).clone(true);
if(options.height > 0) height = obj.children('li:first').height();
height += (options.margin) + (options.padding*2); // adjust for margins & padding
if(dir==='down') obj.css('top', '-' + height + 'px').prepend(clone);
if(attribs && attribs.animate) {
if(state.animating) return;
state.animating = true;
var opts = (dir === 'up') ? {top: '-=' + height + 'px'} : {top: 0};
obj.animate(opts, options.speed, function() {
$(obj).children(selector).remove();
$(obj).css('top', '0px');
state.animating = false;
state.element.trigger("vticker.ticked");
});
} else {
obj.children(selector).remove();
obj.css('top', '0px');
state.element.trigger("vticker.ticked");
}
if(dir==='up') clone.appendTo(obj);
},
nextUsePause: function() {
var state = $(this).data('state');
var options = state.options;
if(state.isPaused || state.itemCount < 2) return;
methods.next.call( this, {animate:options.animate} );
},
startInterval: function() {
var state = $(this).data('state');
var options = state.options;
var initThis = this;
state.intervalId = setInterval(function(){
internal.nextUsePause.call( initThis );
}, options.pause);
},
stopInterval: function() {
var state = $(this).data('state');
if(!state) return;
if(state.intervalId) clearInterval(state.intervalId);
state.intervalId = undefined;
},
restartInterval: function() {
internal.stopInterval.call(this);
internal.startInterval.call(this);
}
};
var methods = {
init: function(options) {
// if init called second time then stop first, then re-init
methods.stop.call(this);
// init
var defaultsClone = jQuery.extend({}, defaults);
var options = $.extend(defaultsClone, options);
var el = $(this);
var state = {
itemCount: el.children('ul').children('li').length,
itemHeight: 0,
itemMargin: 0,
element: el,
animating: false,
options: options,
isPaused: (options.startPaused) ? true : false,
pausedByCode: false
};
$(this).data('state', state);
el.css({overflow: 'hidden', position: 'relative'})
.children('ul').css({position: 'absolute', margin: 0, padding: 0})
.children('li').css({margin: options.margin, padding: options.padding});
if(isNaN(options.height) || options.height === 0)
{
el.children('ul').children('li').each(function(){
var current = $(this);
if(current.height() > state.itemHeight)
state.itemHeight = current.height();
});
// set the same height on all child elements
el.children('ul').children('li').each(function(){
var current = $(this);
current.height(state.itemHeight);
});
// set element to total height
var box = (options.margin) + (options.padding * 2);
el.height(((state.itemHeight + box) * options.showItems) + options.margin);
}
else
{
// set the preferred height
el.height(options.height);
}
var initThis = this;
if(!options.startPaused) {
internal.startInterval.call( initThis );
}
if(options.mousePause)
{
el.bind("mouseenter", function () {
//if the automatic scroll is paused, don't change that.
if (state.isPaused === true) return;
state.pausedByCode = true;
// stop interval
internal.stopInterval.call( initThis );
methods.pause.call( initThis, true );
}).bind("mouseleave", function () {
//if the automatic scroll is paused, don't change that.
if (state.isPaused === true && !state.pausedByCode) return;
state.pausedByCode = false;
methods.pause.call(initThis, false);
// restart interval
internal.startInterval.call( initThis );
});
}
},
pause: function(pauseState) {
var state = $(this).data('state');
if(!state) return undefined;
if(state.itemCount < 2) return false;
state.isPaused = pauseState;
if(pauseState) $(this).addClass('paused');
else $(this).removeClass('paused');
},
next: function(attribs) {
var state = $(this).data('state');
if(!state) return undefined;
if(state.animating || state.itemCount < 2) return false;
internal.restartInterval.call( this );
internal.moveUp(state, attribs);
},
prev: function(attribs) {
var state = $(this).data('state');
if(!state) return undefined;
if(state.animating || state.itemCount < 2) return false;
internal.restartInterval.call( this );
internal.moveDown(state, attribs);
},
stop: function() {
var state = $(this).data('state');
if(!state) return undefined;
internal.stopInterval.call( this );
},
remove: function() {
var state = $(this).data('state');
if(!state) return undefined;
internal.stopInterval.call( this );
var el = state.element;
el.unbind();
el.remove();
}
};
$.fn.vTicker = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.vTicker' );
}
};
})(jQuery);
jQuery(function() {
function setInitialOpacities() {
var ul = jQuery('#home-tick ul');
ul.children('li:nth-child(1)').css("opacity", .15);
ul.children('li:nth-child(2)').css("opacity", .15);
ul.children('li:nth-child(3)').css("opacity", .23);
ul.children('li:nth-child(4)').css("opacity", 1);
ul.children('li:nth-child(5)').css("opacity", .23);
ul.children('li:nth-child(6)').css("opacity", .15);
ul.children('li:nth-child(7)').css("opacity", .15);
}
jQuery('#home-tick').vTicker({showItems: 7});
setInitialOpacities();
jQuery('#home-tick').on('vticker.beforeTick', function() {
var ul = jQuery('#home-tick ul');
var interval = 500;
ul.children('li:nth-child(1)').animate({opacity: .15}, interval);
ul.children('li:nth-child(2)').animate({opacity: .15}, interval);
ul.children('li:nth-child(3)').animate({opacity: .23}, interval);
ul.children('li:nth-child(4)').animate({opacity: .23}, interval);
ul.children('li:nth-child(5)').animate({opacity: 1}, interval);
ul.children('li:nth-child(6)').animate({opacity: .23}, interval);
ul.children('li:nth-child(7)').animate({opacity: .15}, interval);
ul.children('li:nth-child(8)').css("opacity", .15);
});
jQuery('#home-tick').on('vticker.ticked', function() {
});
});
如果这满足您的需要，请标记为答案，我将相应地更新vTicker版本。
理查德
关于jquery - jQuery垂直行情清除器删除伪类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21669860/