One challenge I encountered was that the drop-down button remained clickable even when the opacity was set to zero. I opted to set the opacity to zero for a fading effect, but it didn't quite work as intended. Are there any alternative methods to achieve an animation with hidden content using jQuery?
In the example provided, you'll notice that hovering below the button changes the cursor to a pointer and makes the elements clickable.
I attempted the following solution:
$(".btn").on('click', function(e) {
e.stopPropagation();
var child = $(this).siblings();
if (!child.hasClass("visible")) {
child.animate({
'opacity': 1
}, 1000);
child.addClass("visible");
} else {
child.animate({
'opacity': 0
}, 1000);
child.removeClass("visible");
}
});
$(document).on('click', function(e) {
$(".visible").animate({
'opacity': 0
}, 1000);
$(".visible").removeClass("visible");
});.btn {
outline: none;
border: none;
padding: 10px 20px;
cursor: pointer;
background-color: #eee;
color: #7b7b7b;
width: 150px;
box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
font-weight: bold;
margin-bottom: 20px;
}
.dropdown {
position: relative;
display: inline;
}
.btn-dropdown {
padding: 0px;
margin: 0px;
list-style: none;
background-color: #fff;
position: absolute;
left: 0px;
top: 30px;
box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, .16);
min-width: 200px;
border: 1px solid #ddd;
text-align: initial;
max-height: 210px;
overflow: auto;
opacity: 0;
z-index: 100;
}
.btn-dropdown li {
padding: 6px;
margin: 0px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.btn-dropdown li:hover {
background-color: #ddd;
}
.btn-dropdown li:last-child {
border-bottom: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn first">Select something</button>
<ul class="btn-dropdown">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
<div class="dropdown">
<button class="btn first">Select something</button>
<ul class="btn-dropdown">
<li>Black</li>
<li>Brown</li>
<li>Red</li>
<li>Orange</li>
</ul>
</div>