I'm having some issues changing my class to active when adventwindow <= day, I want it to change the class from disable to active when true. If anyone could help that would be amazing!
var day = 5;
var adventwindow = 1;
if (adventwindow <= day) {
document.getElementsByClassName('disable').className = 'active';
}
.door {
color: #fff;
font-size: 70px;
position: absolute;
top: 0;
left: 0;
background-color: #91c1cc;
box-sizing: border-box;
border-top: 2px #eee dashed;
border-right: 2px #eee dashed;
border-bottom: 2px #eee dashed;
border-left: 1px #eee solid;
border-radius: 6px;
padding: 15px;
width: 130px;
height: 130px;
transform-origin: 0 40%;
transition: all 0.4s ease-in-out;
transform-style: preserve-3d;
text-align: center;
}
a.disable {
pointer-events: none;
cursor: default;
}
a.enable {
pointer-events: auto
}
<a class="disable" href="test">
<div class="door">1</div>
</a>
getElementsByClassName returns a collection of elements with the given class name. You can access the elements by index which start from 0.
document.getElementsByClassName('disable')[0].className = 'active';
Related
I have a portfolio website with some of my projects showcased on there and I'm trying to make a button in the project page that returns the user to the portfolio page when clicked. My only problem is that the parent div element loses focus when I try to click the child button instead of directing the user to the portfolio page. How do I make the parent div stop losing focus on child button click?
I've tried focussing the button element in javascript but that didn't seem to make a difference.
document.getElementById('portfoliobackarrowwrapper').onclick = function () {
document.getElementById('portfoliobackcontainer').focus();
document.getElementById('portfoliobackarrow').focus();
};
div.portfoliobackcontainer {
position: fixed;
width: 120px;
height: 60px;
background-color: white;
z-index: 2;
margin-left: -130px;
margin-top: 50px;
border: 1px solid rgb(185, 185, 185);
display: block;
animation: portfoliobackanim .0001s linear;
}
button.portfoliobackbutton {
background-color: orange;
border: 1px solid rgb(214, 139, 0);
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
color: white;
font-family: 'Inter', sans-serif;
font-size: medium;
margin-left: 10px;
margin-top: 7.5px;
}
button.portfoliobackbutton:hover {
border: 1px solid rgb(255, 166, 0);
background-color: rgb(255, 184, 53);
color:white;
transition: all .25s linear;
cursor: pointer;
}
div.portfoliobackarrowwrapper {
border: 1px solid rgb(185, 185, 185);
width: 35px;
height: 60px;
margin-left: 120px;
margin-top: -51px;
background-color: white;
}
div.portfoliobackarrow {
background: none;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
width: 20px;
height: 20px;
transform: rotate(315deg);
border-radius: 2px;
transition: .05s linear;
margin-top: 17.5px;
animation: portfolioarrowrotate 0.0001s linear;
}
div.portfoliobackarrowwrapper:hover {
cursor: pointer;
}
div.portfoliobackarrowwrapper:hover div.portfoliobackarrow{
border-bottom: 3px solid orange;
border-right: 3px solid orange;
transition: all .1s linear;
}
div.portfoliobackcontainer:focus {
animation-fill-mode: forwards
}
div.portfoliobackcontainer:focus div.portfoliobackarrow{
animation-fill-mode: forwards;
}
#keyframes portfoliobackanim {
to{
margin-left: 0px;
}
}
#keyframes portfolioarrowrotate {
to {
transform: rotate(135deg);
margin-left: 10px;
}
}
<div tabindex="-1" class="portfoliobackcontainer" id="portfoliobackcontainer">
<button class="portfoliobackbutton" onclick="window.location='../index.html';">Portfolio</button>
<div tabindex="-1" class="portfoliobackarrowwrapper" id="portfoliobackarrowwrapper">
<div class="portfoliobackarrow" id="portfoliobackarrow"></div>
</div>
</div>
Beside the problem you have, your code needs to be re-written, maybe not now but in the future once you get more experience.
Let me give you some tips on improving your code:
You can't focus 2 elements, or the previous one loses focus.
When you redirect to another page use anchor tag a and button for other interactions.
Instead of focusing the element, why not give it a class for that specific task.
Try to improve your classes to work without tag names like div.class to .class only. This may break your styles now but take it as advice.
Adopt BEM naming system for classes, it looks soo messy.
So for now, use this solution:
Replace JavaScript code with this:
const backArrowElement = document.getElementById('portfoliobackcontainer')
const backArrowFocusedClass = 'portfoliobackcontainerfocused'
// Toggle `focused` class.
backArrowElement.addEventListener('click', function() {
if (this.classList.contains(backArrowFocusedClass)) {
this.classList.remove(backArrowFocusedClass)
} else {
this.classList.add(backArrowFocusedClass)
}
})
And in CSS file replace class div.portfoliobackcontainer:focus with div.portfoliobackcontainerfocused
See the full code here:
const backArrowElement = document.getElementById('portfoliobackcontainer')
const backArrowFocusedClass = 'portfoliobackcontainerfocused'
// Toggle `focused` class.
backArrowElement.addEventListener('click', function() {
if (this.classList.contains(backArrowFocusedClass)) {
this.classList.remove(backArrowFocusedClass)
} else {
this.classList.add(backArrowFocusedClass)
}
})
div.portfoliobackcontainer {
position: fixed;
width: 120px;
height: 60px;
background-color: white;
z-index: 2;
margin-left: -130px;
margin-top: 50px;
border: 1px solid rgb(185, 185, 185);
display: block;
animation: portfoliobackanim .0001s linear;
}
button.portfoliobackbutton {
display: inline-block;
background-color: orange;
border: 1px solid rgb(214, 139, 0);
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
color: white;
font-family: 'Inter', sans-serif;
font-size: medium;
margin-left: 10px;
margin-top: 7.5px;
}
button.portfoliobackbutton:hover {
border: 1px solid rgb(255, 166, 0);
background-color: rgb(255, 184, 53);
color:white;
transition: all .25s linear;
cursor: pointer;
}
div.portfoliobackarrowwrapper {
border: 1px solid rgb(185, 185, 185);
width: 35px;
height: 60px;
margin-left: 120px;
margin-top: -51px;
background-color: white;
}
div.portfoliobackarrow {
background: none;
border-bottom: 3px solid grey;
border-right: 3px solid grey;
width: 20px;
height: 20px;
transform: rotate(315deg);
border-radius: 2px;
transition: .05s linear;
margin-top: 17.5px;
animation: portfolioarrowrotate 0.0001s linear;
}
div.portfoliobackarrowwrapper:hover {
cursor: pointer;
}
div.portfoliobackarrowwrapper:hover div.portfoliobackarrow{
border-bottom: 3px solid orange;
border-right: 3px solid orange;
transition: all .1s linear;
}
div.portfoliobackcontainerfocused {
animation-fill-mode: forwards
}
div.portfoliobackcontainerfocused div.portfoliobackarrow{
animation-fill-mode: forwards;
}
#keyframes portfoliobackanim {
to{
margin-left: 0px;
}
}
#keyframes portfolioarrowrotate {
to {
transform: rotate(135deg);
margin-left: 10px;
}
}
<div tabindex="-1" class="portfoliobackcontainer" id="portfoliobackcontainer">
<button class="portfoliobackbutton" onclick="window.location='../index.html';">Portfolio</button>
<div tabindex="-1" class="portfoliobackarrowwrapper" id="portfoliobackarrowwrapper">
<div class="portfoliobackarrow" id="portfoliobackarrow"></div>
</div>
</div>
I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>
Below are the two images for dropdowns. I have several dropdowns in the same page at each and inside . On clicking the dropdown all its options get triggered but last options gets hindered under another select dropdown menu options. (Refernce: Image 2) How to prevent that?
The 3 options for the respective dropdown menu are: Profile, Word, Hashtag. The Hashtag options gets hindered . Check full code here: Codepen
Image 1
Image 2
I am trying this code:
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
template += '<div class="custom-options">';
$(this).find("option").each(function() {
template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
});
template += '</div></div>';
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
}, function() {
$(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
$('html').one('click',function() {
$(".custom-select").removeClass("opened");
});
$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});
body {
background: #ededed;
font-family: 'Open Sans', sans-serif;
}
.center {
position: absolute;
display: inline-block;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
/** Custom Select **/
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
}
.custom-select-trigger {
position: relative;
display: block;
width: 230px;
padding: 0 84px 0 22px;
font-size: 20px;
font-weight: 300;
color: #fff;
line-height: 40px;
background: #265a88;
border-radius: 4px;
cursor: pointer;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: '';
width: 10px; height: 10px;
top: 50%; right: 25px;
margin-top: -3px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg) translateY(-50%);
transition: all .4s ease-in-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%; left: 0; right: 0;
min-width: 100%;
margin: 15px 0;
border: 1px solid #b5b5b5;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0,.07);
background: #fff;
transition: all .4s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(0);
}
.custom-options:before {
position: absolute;
display: block;
content: '';
bottom: 100%; right: 25px;
width: 7px; height: 7px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: #fff;
transform: rotate(45deg);
transition: all .4s ease-in-out;
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
border-bottom: 1px solid #b5b5b5;
font-size: 18px;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all .4s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
background: #f9f9f9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sources" id="sources" class="custom-select sources" placeholder="Requirement Completed">
<option value="profile">Profile</option>
<option value="word">Word</option>
<option value="hashtag">Hashtag</option>
</select>
You can solve it in two way:
The first is set z-index in css like : .custom-options{z-index: 1;}
The second is set position like : .custom-options{position: relative;}
the first solution will make the curtain appear above another element, the second will leave the space by default to make it display correctly (even when the curtain is closed)
I using the below code to intialise the nouilslider-react. But it's css is not being loaded. What should I do?
I have imported the react-nouislider. Functionalities are working fine. But I am seeing the sliders as text like below
<SliderInput
range={{min: 0, max: 200}}
start={[0, 100]}
tooltips
/>
Thank you in advance
u have to add some style on that slider
try this example style.css code below (from https://codepen.io/mshwery/pen/CBslE)
body {
text-align: center;
padding: 20px;
}
.no-ui-slider {
width: 100%;
max-width: 500px;
margin: 50px auto;
}
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
}
.noUi-origin {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.noUi-stacking .noUi-handle {
/* This class is applied to the lower origin when
its values is > 50%. */
z-index: 10;
}
.noUi-stacking + .noUi-origin {
/* Fix stacking order in IE7, which incorrectly
creates a new context for the origins. */
*z-index: -1;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 10px;
}
.noUi-horizontal .noUi-handle {
width: 20px;
height: 20px;
left: -10px;
top: -7px;
}
.noUi-horizontal.noUi-extended {
padding: 0 15px;
}
.noUi-horizontal.noUi-extended .noUi-origin {
right: -15px;
}
/* Styling;
*/
.noUi-background {
background: #3182bd;
}
.noUi-connect {
background: #3FB8AF;
box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
-webkit-transition: background 450ms;
transition: background 450ms;
}
.noUi-origin {
border-radius: 2px;
background: #eee;
}
.noUi-target {
border-radius: 2px;
}
.noUi-target.noUi-connect {
box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
}
/* Handles and cursors;
*/
.noUi-dragable {
cursor: w-resize;
}
.noUi-vertical .noUi-dragable {
cursor: n-resize;
}
.noUi-handle {
border-radius: 2px 2px 0 0;
background: #fff;
cursor: default;
box-shadow: 0 0px 1px rgba(0,0,0,0.5);
}
.noUi-active {
}
/* Handle stripes;
*/
.noUi-handle:after {
content: "";
display: block;
position: absolute;
left: 0px;
top: 100%;
border-top: 11px solid #fff;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.noUi-handle:before {
content: "";
display: block;
position: absolute;
left: -0px;
top: 100%;
margin-top: 1px;
border-top: 11px solid rgba(0,0,0,0.2);
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
/* Disabled state;
*/
[disabled].noUi-connect,
[disabled] .noUi-connect {
background: #B8B8B8;
}
[disabled] .noUi-handle {
cursor: not-allowed;
}
so i have a dropdown menu that will fade in once a link is clicked. once the link is clicked everything is fine the menu fades in but once i click off and a function runs that fades out the dropdown. the triangle that is on top of the box fades out slightly slower than the actual box. in css i have made this triangle with the :after selector and a fiddle can be found JsFiddle
HTML
<?php echo 'Welcome ' . $user->data()->fname . '!'; ?>
<div class="Account-Links">
My Account
Sign Out
Help
</div>
CSS
.Account-Actions {
postition: relative;
}
.Account-Links {
position: absolute;
top: 45px;
left: 0;
display: block;
visibility: hidden;
margin: 0;
padding: 0;
width: 200px;
height: 0;
opacity: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,.7);
z-index: 1000;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.Account-Links-On {
height: auto;
visibility: visible;
opacity: 1;
}
.Account-Links::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
.Account-Link {
display: block;
color: #FFF;
margin: 0;
padding: 10px;
}
.Account-Link:hover {
background-color: rgba(231,76,60,.75);
}
a {
text-decoration: none;
}
a.Header-Link {
position: relative;
display: block;
margin: 0 10px;
padding: 0 8px;
line-height: 47px;
color: #777;
border-bottom: 3px solid transparent;
}
a.Header-Link:hover {
color: #000;
}
JS
$(document).ready(function(){
$('.Account-Actions').bind('click', function(){
$('.Account-Links').toggleClass('Account-Links-On');
});
$('html').click(function() {
$('.Account-Links').removeClass('Account-Links-On');
});
$('.Account-Links, .Account-Actions').click(function(event){
event.stopPropagation();
});
});
You have created that arrow on different class and toggling the opacity on other class. You arrow shouldn't be on .Account-Links. It should be on .Account-Links-On if you don't want that delay to happen.
SEE THE DEMO
.Account-Links-On::after {
position: absolute;
top: -8px;
right: 22px;
content: '';
width: 0;
height: 0;
border-bottom: solid 8px rgba(0,0,0,.7);
border-left: solid 8px transparent;
border-right: solid 8px transparent;
}
And this concludes that :after psuedo selector doesn't animate slower.