JQuery 페이드 아웃/숨기기 이전 div

3 개의 div가 서로 다른 내용으로 겹치는 간단한 페이지를 만들려고합니다. 각 DIV 내에는 처음에 표시된 DIV를 페이드 아웃해야하는 이미지 (NEXT 버튼)와 두 번째 DIV를 페이드 인합니다. 그 두 번째 DIV 안에는 FadeOut DIV 2와 FadeIn DIV 3에 대한 또 다른 NEXT 버튼이 있습니다.JQuery 페이드 아웃/숨기기 이전 div

이전에 표시된 DIV를 숨기는 데 문제가 있습니다. 그리고 모든 3 개의 내용이 서로 위에 표시됩니다.

도와주세요 :이 같은

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
</head> 

<style> 
div { 
width:80px; 
display:none; 
height:80px; 
z-index : 1; 
position: fixed; 
top: 20px; 
left: 20px; 
} 

div#one { background:#f00; } 
div#two { background:#0f0; } 
div#three { background:#00f; } 


form { 
    border: thick solid #1D4600; 
     height: 500px; 
} 
</style> 
</head> 

<body> 
<form> 
    <div id="one" style="display:inline !important"> 
<input type="text" name="textfield" id="textfield" /> 
<img src="test.gif" width="95" height="72" class="nextlink"></div> 

    <div id="two"><a href="#">link2</a> 
<img src="test.gif" width="95" height="72" class="nextlink"> 
<input type="text" name="textfield" id="textfield" /> 
</div> 

    <div id="three">Other text</div> 
</form> 

<script> 
    $("img.nextlink").click(function(event) { 
    $("div:hidden:first").fadeIn("slow"); 
}); 
</script> 


</body> 
</html>

출처

2013-04-12 MacGyver_97

어쩌면 뭔가를? 코드는 청소에 사용 할 수 있지만이

$("div:first").show(); 

$("img.nextlink").click(function(event) { 
    $(this).parent().hide(); 
    if ($(this).parent().next("div").length == 0) { 
     $("#one").fadeIn("slow"); 
    } 
    else 
    { 
     $(this).parent().next("div").fadeIn("slow"); 
    } 
});

이 DEMO 좋은 시작에 당신을 얻어야한다 :http://jsfiddle.net/CK9H8/

출처

2013-04-12 02:25:19 99823

완벽한, 감사합니다! 그것이 본질적으로 내가 달성하기를 원하는 것입니다. –

당신을 환영합니다! 내가 말했듯이, 코드는 아마도 정리 될 수 있었고, 당신의 특별한 필요에 더 잘 맞을 수 있었지만,이 샘플이 당신의 특정한 사용법을위한보다 세련된 코드를 얻길 바란다. – 99823

DIV 내에

이있는 경우이 기능이 작동하지 않는 것 같습니다. 왜 그런가? –

JQuery 페이드 아웃/숨기기 이전 div

답변

관련 문제