클릭하기 전에 Div가 페이드 인하는 것을 방지하는 방법

div를 한 번 클릭하면 div가 전환되도록 버튼을 클릭하고 싶습니다. 내 문제는 버튼을 클릭 할 때 콘텐츠가 이미 "숨겨져있는 동안"색이 바래지 않아 사라지지 않는다는 것입니다. Div가 한 번 버튼을 누르면 사라지고 Div가 전환되도록하려면 어떻게해야합니까?클릭하기 전에 Div가 페이드 인하는 것을 방지하는 방법

Jcript :

// First Div 

$(".N1, .N2, #N3").hide().each(function(i) { 

    $(this).delay(i*500).fadeIn(750); 
}); 


$('button').on('click', function(){ 

    $('.AboutP1').addClass('hidden'); 
    $('.AboutP2').removeClass('hidden'); 
}); 

// Second Div 

$(".N4, .N5, #N6").hide().each(function(i) { 

    $(this).delay(i*1500).fadeIn(1500); 
});

희망 여기에 충분한 정보 :

는 감사가! 이 라인을 따라

출처

2017-11-27 TimothyKA

가 jsfiddle을 제공하십시오. 이해하는 것이 훨씬 쉬우 며 수업과 ID가 섞이지도 않습니다. – manuzi1

애니메이션으로 숨기기가 페이드 아웃 (그러나 초고속)으로 설정하고 다른 하나는 완전히 사라지게 설정하십시오. – nurdyguy

클래스 "추가"대신 jQuery [toggle] (http://api.jquery.com/toggle/) 수동으로 " –

당신은에 관심이있을 수 있습니다 jQuery의 .fadeToggle() : http://api.jquery.com/fadetoggle/

여기에 버튼 클릭에 다시 다시 서로 하나의 DIV의 내용을 퇴색하는 솔루션이다 :

$('button').click(function() { 
 
    if ($('.AboutP1').is(":visible")) { 
 
    $('.AboutP1').fadeToggle(500, "linear", function() { 
 
     $('.AboutP2').fadeToggle(500, "linear"); 
 
    }); 
 
    } else { 
 
    $('.AboutP2').fadeToggle(500, "linear", function() { 
 
     $('.AboutP1').fadeToggle(500, "linear"); 
 
    }); 
 
    } 
 
}); 
 

 
$('.AboutP2').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button>Button</button> 
 
<div class="AboutP1">AboutP1</div> 
 
<div class="AboutP2">AboutP2</div>

출처

2017-11-27 18:15:11 emshore

@TimothyKA는 당신이하려는 일을 성취합니까? – emshore

네, 그게 내가 성취하려고하는 것에 가깝습니다! 나는 그것으로 조금 놀 것이다! – TimothyKA

무언가가 당신을 위해 작동합니다 :

$(document).ready(function() 
{ 
    $('#toggle').on('click', function() 
    { 
    $('.AboutP1').fadeTo(1000, 0, function() 
    { 
     $('.AboutP1').addClass('hidden'); 
     $('.AboutP2').removeClass('hidden').fadeTo(30000, 100); 
    }); 
    }); 
});

당신은 아마 (는 CSS에서 설정) 0의 불투명도에서 .AboutP2을 시작해야합니다.

여기에 바이올린이 있습니다. 페이드 인/아웃 시간으로 재생할 수 있습니다. https://jsfiddle.net/ue2p01gv/

출처

2017-11-27 18:12:22 nurdyguy

클릭하기 전에 Div가 페이드 인하는 것을 방지하는 방법

답변

관련 문제