누구든지이 드롭 다운을 javascript가 + 슬라이드로 페이드 아웃하고 페이드 아웃 + 슬라이드 아웃 할 수 있습니까?

Question

예, 너무 많이 묻습니다. 사용 가능한 자바 스크립트 지식이 없습니다. 내가 사용한 코드는 w3school 드롭 다운 목록 데모에서 찾은 것과 정확히 같습니다. 내 드롭 다운 목록을 페이드 인하거나 슬라이드 아웃하거나 페이드 아웃하거나 슬라이드 아웃 해 주실 수 있습니까? 여기있다 : 사용자가 외부 그것의

클릭하면

/* 버튼을 사용자가 클릭, 숨기기 및 표시 사이의 전환 드롭 다운 내용 */

function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

가 // 드롭 다운을 닫습니다

window.onclick = function(e) { 
    if (!e.target.matches('.dropbtn')) { 

var dropdowns = document.getElementsByClassName("dropdown-content"); 
for (var d = 0; d < dropdowns.length; d++) { 
    var openDropdown = dropdowns[d]; 
    if (openDropdown.classList.contains('show')) { 
    openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 

여기는 W3school demo link입니다. 내 구조는 꽤 많이 있습니다. jQuery의 fadeIn()과 페이드 아웃() 메서드를이 행할 (http://api.jquery.com/fadein/http://api.jquery.com/fadeout/)는 사용

Answer 1

function myFunction() { 
     $("#myDropdown").fadeIn(); 
    //document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     $("#myDropdown").fadeOut(); 
     /*if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     }*/ 
    } 
    } 
} 

$(function() 
{ 
$("#btnButton1").click(myFunction); 
}); 

데모 : 이 https://jsfiddle.net/6ry2c7dn/1/