Jesse Jesse - 23 days ago 7
CSS Question

JQuery .show() and .hide() not working correctly

I have been trying to get the below code working for the past 2 hours with no luck. Can anyone see where I am having issues?

Snippet:

<script>

$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');

$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});

});

</script>




$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');

$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});

.messageBox {
height: auto;
width: auto;

text-align: center;

z-index: 100;

padding: 100px;

background-color: #222;
color: #fff;

font-family: poppins;
font-size: 14px;

display: block;
}
.messageBox span {
color: #fff;

font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;

position: fixed;

top: 10px;
left: 0px;

font-size: 14px;
font-family: poppins;

display: inline-block;

background-color: transparent;

border-bottom-right-radius: 10px;
border-top-right-radius: 10px;

cursor: pointer;
}



.themes {
height: auto;
width: auto;

position: relative;

font-size: 14px;
font-family: poppins;

display: inline-block;

background-color: #222;
color: #777;

border-top-right-radius: 10px;

cursor: pointer;
}
.color-select {
height: auto;
width: 100px;

padding: 20px;

font-size: 14px;
font-family: poppins;

display: inline-block;

background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;

background-color: #222;

display: inline-block;

margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;

display: inline-block;

background-color: transparent;
color: #ff6e00;

border-radius: 5px;
border: thin solid #222;

padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;

display: inline-block;

background-color: transparent;
color: #9ad749;

border-radius: 5px;
border: thin solid #222;

padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;

display: inline-block;

background-color: transparent;
color: #4589f3;

border-radius: 5px;
border: thin solid #222;

padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to<br> <span id="color">*SELECTED_COLOUR*</span></div>



<div class="customiser">

<div class="themes">

<div class="color-select">Theme<br>

<div class="color-select-table">
<div class="color-select-orange" onclick="swapStyleSheet('_scripts/default.css')">Orange</div><br>
<div class="color-select-green" onclick="swapStyleSheet('_scripts/green.css')">Green</div><br>
<div class="color-select-blue" onclick="swapStyleSheet('_scripts/blue.css')">Blue</div>
</div>

</div><!--END COLOR-SELECT-->

</div><!--END THEMES-->

</div><!--END OF CUSTOMISER-->





The swapStyleSheet command works fine, but the text change for
#color
and the display change for
.messageBox
does not.

Answer

jQuery's show() and hide() are not animated by default, and doesn't support delay() as they don't add the the FX queue.

When the delay doesn't work, the elements are hidden right away, and never made visible for two seconds.

To make them animated, one has to pass in a number, and even zero should do it

$(document).ready(function(e) {
    $('.messageBox').hide();
    $('#color').text('');

    $('.color-select-orange').click(function(e) {
        console.log('ds')
        $('.messageBox').show().delay(2000).hide(0);
        $('#color').text('Orange').show().delay(2000).hide(0);
    });
});
.messageBox {
    height: auto;
    width: auto;
    text-align: center;
    z-index: 100;
    padding: 100px;
    background-color: #222;
    color: #fff;
    font-family: poppins;
    font-size: 14px;
    display: block;
}

.messageBox span {
    color: #fff;
    font-weight: bold;
    font-family: poppins;
    font-size: 14px;
}

.customiser {
    height: auto;
    width: auto;
    position: fixed;
    top: 10px;
    left: 0px;
    font-size: 14px;
    font-family: poppins;
    display: inline-block;
    background-color: transparent;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
}

.themes {
    height: auto;
    width: auto;
    position: relative;
    font-size: 14px;
    font-family: poppins;
    display: inline-block;
    background-color: #222;
    color: #777;
    border-top-right-radius: 10px;
    cursor: pointer;
}

.color-select {
    height: auto;
    width: 100px;
    padding: 20px;
    font-size: 14px;
    font-family: poppins;
    display: inline-block;
    background-color: #333;
    color: #777;
}

.color-select:hover {
    background-color: #222;
    color: #fff;
}

.color-select-table {
    width: 100%;
    background-color: #222;
    display: inline-block;
    margin-top: 10px;
}

.color-select-orange {
    height: auto;
    width: 100%;
    display: inline-block;
    background-color: transparent;
    color: #ff6e00;
    border-radius: 5px;
    border: thin solid #222;
    padding-top: 5px;
    padding-bottom: 5px;
}

.color-select-orange:hover {
    background-color: #ff6e00;
    color: #fff;
}

.color-select-green {
    height: auto;
    width: 100%;
    display: inline-block;
    background-color: transparent;
    color: #9ad749;
    border-radius: 5px;
    border: thin solid #222;
    padding-top: 5px;
    padding-bottom: 5px;
}

.color-select-green:hover {
    background-color: #9ad749;
    color: #fff;
}

.color-select-blue {
    height: auto;
    width: 100%;
    display: inline-block;
    background-color: transparent;
    color: #4589f3;
    border-radius: 5px;
    border: thin solid #222;
    padding-top: 5px;
    padding-bottom: 5px;
}

.color-select-blue:hover {
    background-color: #4589f3;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to
    <br> <span id="color">*SELECTED_COLOUR*</span>
</div>
<div class="customiser">
    <div class="themes">
        <div class="color-select">Theme
            <br>
            <div class="color-select-table">
                <div class="color-select-orange">Orange</div>
                <br>
                <div class="color-select-green">Green</div>
                <br>
                <div class="color-select-blue">Blue</div>
            </div>
        </div>
    </div>
</div>