2012-08-20 2 views
0

이 사이트에서 작업하고 있습니다 : http://mccraymusic.com/newsite/ "사이트 입력"을 클릭하면 배경이 흐려진 후에 배경 위에 탐색 모음이 올바르게 흐려지는 문제를 파악하는 데 문제가 있습니다. 내비게이션 바 스타일 아직 안 알아. 나는 네비게이션이 페이드 인 할 올바른 코드를 가지고 있다고 확신한다. 내가 원하는 때에 페이드 인 (fade in)되도록 어떻게 작동시키는 지 모르겠다.내용 배경이 희미 해짐

덕분에

+0

나중에 페이드 인을 시작하기 위해 jQuery의'.delay()'메소드를 사용할 수 있습니까? –

+0

'position : absolute;'를'.navbar' 스타일에 추가 할 수 있습니까? 이미지에'position : absolute; '이 있다는 사실 때문에 z- 색인 문제가 발생합니다. – Chris

+0

^이 녀석은 맞다. 'position : absolute'는'.move' 컨테이너를 움직일 것이고,'position : relative'를 시도 할 것입니다. 나는이 상황에서 실제 문제가 있다고 짐작하고있다. – MusikAnimal

답변

2

난 당신이 jQuery를에 콜백을 사용할 필요가 생각한다. 기본적으로 두 번째 함수는 첫 번째 함수가 완료된 후에 실행됩니다. 여기 http://www.w3schools.com/jquery/jquery_callback.asp

+0

실제로 w3schools를 사용하면 -1이 아니지만 -1이된다. 그게 전부입니다. [w3fools] (http://w3fools.com/) – MusikAnimal

+0

fadein은 콜백에 buiit을 가지고 있습니다. fadeIn ([duration] [, callback]) http://api.jquery.com/fadeIn/ – user1289347

0


는 그것의 바이올린입니다 http://jsfiddle.net/YL4p7/

Fadein는 내장 콜백을 단지. 당신이 콜백으로 애니메이션과 배경이 흐리게 한 후이 실행됩니다 추가

도 상대 위치를 추가있다 bg 이미지에서 볼 수 있도록 #container로 이동합니다.

$(function() { 
    var images = ["black.jpg","bg.jpg"]; 
    $('<img>').attr({'src':'http://mccraymusic.com/newsite/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0); 

    $('.move').animate({ 
      top:200, 
      left:250, 
    }); 

    $('.entersite').click(function(e) { 
     e.preventDefault(); 
     var image = images[1]; 
     $('#bg').parent().fadeOut(200, function() { 
      $('#bg').attr('src', 'http://mccraymusic.com/newsite/assets/images/'+image); 
       $(this).fadeIn(1000, function() { 
        $('.navbar').fadeIn(1000); 
       }); 
     }); 
     $('.move').animate({"left": "-=50px", "top": "-=200px"}); 
    }); 
});​ 
관련 문제