Question

想知道是否有办法在没有所有冗余代码的情况下更改此动画的左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'});
});

Answer 1

将值放在变量中。

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'});
});

Answer 2

您可以使用data属性并在这些属性中存储所需的目标值。

例如，如果您有这样的标记：

<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);
});

参见 a live demo

在您的情况下，这可能意味着您将left的不同值附加到.recent和.feature元素，并在悬停处理程序中检索此数据（触发悬停的元素）通常可以通过$(this)）

来引用

data上的信息 - 可以在 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

根据选择器更改css值？

2 个答案: