Question

我正在尝试完成一个回调函数，以减少我为三个单独的图像及其各自的文本编写的代码。这些图像有一定的动画为它们运行，但我在这里停留了$ e回调，这是唯一一个无效的回调。

由于某些原因，它没有服用，但如果我用animatePics替换$ e，比如说'left'，那么动画就没有问题了。

有人会碰巧知道为什么函数在接受$ e回调时出现问题，好吗？我已尝试过各种带撇号和语音标记的配置，但仍然没有快乐。

谢谢，丹。

function animatePics($a, $b, $c, $d, $e, $f, $g) {
    if($('#urlContainer a').attr('href') == undefined) {    
        $('#textContainer').hide().html($a).fadeIn(1000);
        $('#urlContainer').hide().html($b).fadeIn(3000);
        $('.pictureBox:nth-child('+$c+')').animate({opacity: '0'}, 1000);
        $('.pictureBox:nth-child('+$d+')').animate({$e: $f},1000);
        $('#homeIcon').fadeIn(2000);
        $('#textContainer a').css({color: $g});
        $('footer').hide();
        $('.webImg').css({cursor: 'default'});
    }
};

$('.pictureBox:nth-child(1)').click(function() {
    animatePics($someText1,'<a href="http://www.somewebsite1.com" target="_blank">somewebsite1.com</a>','n2',1,'left','32.90%','red');
});

$('.pictureBox:nth-child(2)').click(function() {
    animatePics($sometext2,'<a href="http://www.somewebsite2.com" target="_blank">somewebsite2.com</a>',1,3,'opacity',0,'seagreen');
});

$('.pictureBox:nth-child(3)').click(function() {
    animatePics($sometext3,'<a href="http://www.somewebsite3.com" target="_blank">somewebsite3.com</a>','-n+2',3,'right',0,'blue');
});

Answer 1

您可以尝试使用以下代码：

function animatePics($a, $b, $c, $d, $animateOptions, $g) {
    if($('#urlContainer a').attr('href') == undefined) {    
        $('#textContainer').hide().html($a).fadeIn(1000);
        $('#urlContainer').hide().html($b).fadeIn(3000);
        $('.pictureBox:nth-child('+$c+')').animate({opacity: '0'}, 1000);
        $('.pictureBox:nth-child('+$d+')').animate($animateOptions,1000);
        $('#homeIcon').fadeIn(2000);
        $('#textContainer a').css({color: $g});
        $('footer').hide();
        $('.webImg').css({cursor: 'default'});
    }
};

$('.pictureBox:nth-child(1)').click(function() {
    animatePics($someText1,'<a href="http://www.somewebsite1.com" target="_blank">somewebsite1.com</a>','n2',1,{left : '32.90%'},'red');
});

$('.pictureBox:nth-child(2)').click(function() {
    animatePics($sometext2,'<a href="http://www.somewebsite2.com" target="_blank">somewebsite2.com</a>',1,3,{opacity : 0},'seagreen');
});

$('.pictureBox:nth-child(3)').click(function() {
    animatePics($sometext3,'<a href="http://www.somewebsite3.com" target="_blank">somewebsite3.com</a>','-n+2',3,{right : 0},'blue');
});

这里我们删除了$e, $f而不是我们正在传递持有动画属性的JS对象。我相信它会按照您的需要运作。

在jquery函数回调中应用css属性

1 个答案: