jQuery easing plugin 문제

Question

인터넷에서 튜토리얼을 발견했습니다. jquery로 물건을 움직이게하기. 내 웹 사이트의 헤더에 h1 태그를 애니메이션화합니다. 그리고 헤더에있는 내 웹 사이트의 로고를 원합니다. 나는이 코드를 애니메이션에 사용했다.

/* Slogan (h1) effect header */ 
$(function() { 
    // make sure your h2's have a position relative 
    $('#header h1').css({ 
     left: '600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate, 1000); 
}); 

function animate() { 
    $('#header h1').animate({ 
     left: 0 
    }, 1000); 
} 

/* Effect op logo */ 
$(function() { 

    $('#header .logo').css({ 
     top: '-600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate, 1000); 
}); 

function animate() { 
    $('#header .logo').animate({ 
     top: 0 
    }, 1000); 
} 

이 애니메이션의 경우 jquery.easing1.3 플러그인을 사용했습니다. 이제 문제를 해결하십시오. 내가 작성한 코드. 로고 효과 만 재생됩니다. h1에 미치는 영향은 없습니다. 내가 뭘해야하니? 그 h1 로고와 header.logo animate ???

감사합니다 !!!!

Answer 1

당신은 Neurofluxation의 솔루션은 오타를 제외하고 (작동하지만

/* Effect op logo */ 

$(function() { 

    $('#header .logo').css({ 
     top: '-600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate2, 1000); 
}); 

function animate2() { 
    $('#header .logo').animate({ 
     top: 0 
    }, 1000); 
} 

Answer 2

/* Slogan (h1) effect header */ 
$(function() { 
    // make sure your h2's have a position relative 
    $('#header h1').css({ 
     left: '600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate, 1000); 
}); 

function animate() { 
    $('#header h1').animate({ 
     left: 0 
    }, 1000); 
} 

/* Effect op logo */ 
$(function() { 

    $('#header .logo').css({ 
     top: '-600px' 
    }) 

    jQuery.easing.def = 'easeOutBounce'; 
    setTimeout(animate, 1000); 
}); 

function animateAgain() { 
    $('#header .logo').animate({ 
     top: 0 
    }, 1000); 
} 

Answer 3

의심의 여지가 편집 할 것입니다 ... 당신은 고정 문제로 이름을 바꿀 수 있습니다 ... 두 번째 animate() 덮어했다 나가이 포스트로 끝날 때까지 멀리 ...), 여기에 몇 가지 일반적인 나쁜 연습 문제가 있습니다.

이 코드를 모두 같은 페이지에 가지고 있다면, 반복 할 수 있습니다. 나는 여러분이 코드를 좀 더 재사용 할 수 있도록 리팩토링 할 것을 제안한다. 또한 $(function() { }); 문 은이 병합 될지라도 명시 적으로 구분할 필요가 없습니다. 그건 그냥 당신이 정말 관심이있어 코드의 양을 증가

이 내가 그것을 할 거라고 방법은 다음과 같습니다.

$.easing.def = 'easeOutBounce'; 

$(function() { 
    $('#header h1').css({ left: '600px' }); 
    $('#header .logo').css({ top: '-600px' }); 

    setTimeout(animateAll, 1000); 
}); 

function animateAll() { 
    $('#header h1').animate({ left: 0 }, 1000); 
    $('#header logo').animate({ top: 0 }, 1000); 
} 

니스와 DRY, 당신은 생각하지 않아? =)