jquery 함수 콜백에 CSS 속성 적용

3 개의 개별 이미지와 해당 텍스트에 대해 작성중인 코드를 줄이기 위해 콜백 함수를 완료하려고합니다. 이미지에는 특정 애니메이션이 실행되지만, 작동하지 않는 유일한 콜백 인 $ e 콜백이 붙어 있습니다.jquery 함수 콜백에 CSS 속성 적용

어떤 이유인지 모르겠지만 animatePics의 $ e를 '왼쪽'으로 바꾸면 아무런 문제가 없습니다.

아무도 함수가 $ e 콜백을 사용하는 데 문제가 있는지 알 수 있습니까? 저는 아포스트로피와 스피치 마크 등으로 모든 형태의 구성을 시도했지만 여전히 기쁨은 없습니다.

감사합니다. Dan.

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

출처

2016-08-19 Daniel Underwood

당신은 다음 코드로 시도 할 수

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 객체 잡고 애니메이션 속성을 전달하고 있습니다. 나는 그것이 당신의 필요에 따라 작동 할 것이라고 확신합니다.

출처

2016-08-19 11:46:42 vijayP

그게 완벽하게 작동했습니다, 고마워요. 나는 그 라인을 따라 뭔가를 시도했지만 앞으로 '움직이는 애니메이션'코드를 가져갔습니다. 그러나 나는 그것을 모두 문자열에 넣었습니다. –

correct ...'$ .animate'는 JS 객체가 필요합니다. 고마워. ':)'! – vijayP

jquery 함수 콜백에 CSS 속성 적용

답변

관련 문제