Click link in div to slide div away for another to appear

[multichild]

Hi,

I have already created a div that slides up from the bottom of the screen on a timer, and closes on a timer, and it works fine, but it needs to be tweeked, so that if they click ‘YES’ in the first slider, that div slides down, for another to appear, just not sure how on click of yes to slide the one down and make the other appear.

#cristalcheck_app{background-color:rgba(34, 190, 239, 0.8);height:100px;line-height:10px;width:100%;position:fixed;bottom:-100px;padding:10px; border-top:#fff dotted 1px;}
#cristalcheck_app p{line-height:75px; text-align:center; font-size:39px; color:#111;}
#cristalcheck_app_link{background-color:rgba(234, 84, 158, 0.8);height:100px;line-height:10px;width:100%;position:fixed;bottom:-100px;padding:10px; border-top:#fff dotted 1px;}
#cristalcheck_app_link p{line-height:75px; text-align:center; font-size:25px; color:#111;}

<div id="cristalcheck_app">
<p>ARE YOU A HOTELIER? YES | NO</p>
</div>
<div id="cristalcheck_app_link">
<p>Click here to view our new self-assessment option - <a href="http://www.cristalcheck.com" target="_blank">GO</a> </p>
</div>

So far have only the one script that deals with the first div with the YES \ NO question

<script>
$(document).ready(function() {
$('#cristalcheck_app').delay(1000).animate({
 bottom: "0px"
 }, 600, function() {
$(this).delay(55555500).animate({
bottom: "-100px"
 }) }); });

And I suppose, ideally if they click ‘NO’ it slides down without activating the second one

[multichild]

I think this might be close, but its not quite working - -

<p>ARE YOU A HOTELIER? <span class="myspan" style="cursor:pointer">YES</span> | NO</p>

<script>
$(document).ready(function() {
$('#cristalcheck_app').delay(1000).animate({
bottom: "0px"
}, 600, function() {
$(this).delay(55500).animate({
bottom: "-100px"
}) 
}); });
</script>
<script>
$("body").on('click', ".myspan", function(){
$('#cristalcheck_app').animate({
 bottom: "-100px"
 }, 600, function() {
 $('#cristalcheck_app_link').animate({
bottom: "0px"
 }) 
 }); });
</script>

On click of the YES, it might be the case that it is working, just there a huge delay which possibly relates to delay(55500), before the second div appears, so there a conflict there. Ideally when you click YES the first slide slides down right away and then other appears after it. Cant get that to work, and then if they click NO ideally the first one just slides down straight away too, and then they both have a strict amount of time on the page where by they slide down given a certain amount of time.

[multichild]

I cant seem to be able to be able to override the first function in making the div animate below the screen before the delay(5500)

<div id="cristalcheck_app">
<p>ARE YOU A HOTELIER? <span class="myspan" style="cursor:pointer">YES</span> | NO</p>
</div>
<div id="cristalcheck_app_link">
<p><span class="cristalcheck_link" style="cursor:pointer">GREAT! VIEW OUR NEW SELF-ASSESSMENT OPTION...   </span></p>
</div>
<script>
$(document).ready(function() {
$('#cristalcheck_app').delay(1000).animate({
bottom: "0px"
}, 600, function() {
$('#cristalcheck_app').delay(5500).animate({
bottom: "-100px"
 });}); });
</script>
<script>
$("body").on('click', ".myspan", function(){
$('#cristalcheck_app').animate({
 bottom: "-100px"
 }, 600, function() {
 $('#cristalcheck_app_link').animate({
bottom: "0px"
 }) }); });
</script>
<script>
$("body").on('click', ".cristalcheck_link", function(){
window.open('http://www.mysite.com');
});
</script>

[PaulOB]

Try adding stop before you animate it out of sight.

e.g.$('#cristalcheck_app').stop().animate({

$("body").on('click', ".myspan", function(){
$('#cristalcheck_app').stop().animate({
 bottom: "-100px"
 }, 600, function() {
 $('#cristalcheck_app_link').animate({
bottom: "0px"
 }) }); });

[multichild]

Thank you Paul, spot on.

[multichild]

Hi Paul,

I forgot to think about the second div needing to animate itself back down again and the code below is all good, up to the last function where i’m asking for the div to delay 7500 and slide down, its not doing it, i cant see what the problem is sorry.

$("body").on('click', ".myspan", function(){
$('#cristalcheck_app').stop().animate({
 bottom: "-100px"
 }, 600, function() {
 $('#cristalcheck_app_link').animate({
bottom: "0px"
 }),function() {
 $('#cristalcheck_app_link').delay(7500).animate({
bottom: "-100px"
 }) 
 };
 }); });

[PaulOB]

You seem to have a bracket in the wrong place. It should be like this:

$("body").on('click', ".myspan", function() {
    $('#cristalcheck_app').stop().animate({
        bottom: "-100px"
    }, 600, function() {
        $('#cristalcheck_app_link').animate({
            bottom: "0px"
        }, function() {
            $('#cristalcheck_app_link').delay(7500).animate({
                bottom: "-100px"
            })
        });
    });
});

[multichild]

I thought it was, but couldnt see it. thanks again Paul