根据选择器更改css值?
问题描述:
想知道是否有办法改变这个动画的左css值而不需要所有的冗余代码?根据选择器更改css值?
$('.recent .view-details-wrapp').css({opacity:0, left:33});
$('.recent .controls-wrapp').hover(function() {
$(this).find('.view-details-wrapp').stop()
.animate({left:63}, {queue:false, duration:300, easing:'easeOutCubic'})
.animate({opacity:'0.99'}, {queue:false, duration:400, easing:'easeOutCubic'});
},function() {
$(this).find('.view-details-wrapp').stop()
.animate({left:33}, {queue:false, duration:550, easing:'easeOutSine'})
.animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
});
$('.featured .view-details-wrapp').css({opacity:0, left:83});
$('.featured .controls-wrapp').hover(function() {
$(this).find('.view-details-wrapp').stop()
.animate({left:103}, {queue:false, duration:300, easing:'easeOutCubic'})
.animate({opacity:'0.99'}, {queue:false, duration:400, easing:'easeOutCubic'});
},function() {
$(this).find('.view-details-wrapp').stop()
.animate({left:83}, {queue:false, duration:550, easing:'easeOutSine'})
.animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
});
答
你可以使用一个data
属性和所需的目标值存储在这些atrributes。
例如,如果您有类似这样的标记:
<div data-target="0.1"></div>
<div data-target="0.2"></div>
...
<div data-target="0.8"></div>
<div data-target="0.9"></div>
你可以使用一个单一的hover
- 结合将所有这些div淡化其相应的值:
$('div').hover(function(){
$(this).fadeTo('fast',$(this).data('target'));
},function(){
$(this).fadeTo('fast',1);
});
在你的情况下,这可能意味着你附加了不同的值left
到您.recent
和.feature
元件和检索悬停处理程序内该数据(触发悬停的元件可以通过$(this)
被通常称为)
信息上data
-attributes可以在MDN
备选地发现(如果你不想或不能改变你的标记),你也可以找出什么元素已经触发处理程序中的悬停。所以,如果您有:
<div class="foo"></div>
<div class="bar"></div>
你可以这样做:
$('div').hover(function(e){
var t;
if ($(e.target).hasClass('foo')){
t = 0.2;
} else if ($(e.target).hasClass('bar')){
t = 0.8;
}
$(this).fadeTo('fast',t);
},function(){
$(this).fadeTo('fast',1);
});
其中e.target
是通过事件的目标。见another fiddle
答
将该值放入一个变量中。
var left = 83;
$('.recent .view-details-wrapp').css({opacity:0, left:left});
$('.recent .controls-wrapp').hover(function() {
$(this).find('.view-details-wrapp').stop()
.animate({left:(left + 30)}, {queue:false, duration:300, easing:'easeOutCubic'})
.animate({opacity:'0.99'}, {queue:false, duration:400, easing:'easeOutCubic'});
},function() {
$(this).find('.view-details-wrapp').stop()
.animate({left:left}, {queue:false, duration:550, easing:'easeOutSine'})
.animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
});
感谢您的帮助...后来应该做的伎俩...再次感谢! – Taylor 2012-04-20 07:32:31
@Taylor这样做会让你有点笨拙,但是因为你只有2个,所以应该可以这样处理。 – m90 2012-04-20 08:18:32