ボタンがクリックされたときにリンクをスライドさせます

Question

ボタンをクリックした場所に作成しようとしていますdivがスライドして別のウェブサイトへのリンクを含んでいます。私は現在のコードを提供していますが、ボタンをクリックするとスライドしません。スライドしますが、ボタンの下に表示されます。

$('.button1').on('click', function() { 
 
    animateDiv(); 
 
}) 
 

 
$(document).keyup(function(e) { 
 
    if (e.keyCode === 27 && $('.inner').hasClass('visible')) { 
 
    animateDiv(); 
 
    } 
 
}) 
 

 
function animateDiv() { 
 
    $('.inner').toggleClass('visible'); 
 
    $('.inner').animate({ 
 
    width: 'toggle', 
 
    }, 350); 
 
}

.toolbar { 
 
    position: right; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    margin: 0px auto; 
 
    padding: 5px 0px; 
 
    background-color: skyblue; 
 
} 
 

 
.inner { 
 
    float: right; 
 
    display: none; 
 
} 
 

 
.btn-primary { 
 
    color: #fff; 
 
    background-color: #2780E3; 
 
    border-color: #2780E3; 
 
} 
 

 
.btn-lg, 
 
.btn-group-lg > .btn { 
 
    padding: 0.5rem 1rem; 
 
    font-size: 1.171875rem; 
 
    line-height: 1.5; 
 
    border-radius: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='toolbar'> 
 
    <div> 
 
    <button class="button1 btn btn-primary btn-lg">Slide it</button> 
 
    </div> 
 
    <div class="inner is-hidden"> 
 
    <a href="http:///www.google.com">Google</a> 
 
    </div> 
 
</div>

Answer 1

たぶん、あなたは、摺動時にカバーするために絶対位置を使用してボタンの上にあなたの要素を作成する必要があります。あなたはこれを試すことがあります。

$('.button1').on('click', function() { 
 
    animateDiv(); 
 
}) 
 

 
$(document).keyup(function(e) { 
 
    if (e.keyCode === 27 && $('.inner').hasClass('visible')) { 
 
    animateDiv(); 
 
    } 
 
}) 
 

 
function animateDiv() { 
 
    $('.inner').toggleClass('visible'); 
 
    $('.inner').animate({ 
 
    width: 'toggle', 
 
    }, 350); 
 
}

.toolbar { 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    margin: 0px auto; 
 
    padding: 5px 0px; 
 
    background-color: skyblue; 
 
    position:relative; 
 
} 
 

 
.inner { 
 
    display: none; 
 
    position: absolute; 
 
    top:0; 
 
    bottom:0; 
 
    right:0; 
 
    left:0; 
 
    z-index: 2; 
 
    background-color: skyblue; 
 
    text-align:center; 
 
} 
 

 
.btn-primary { 
 
    color: #fff; 
 
    background-color: #2780E3; 
 
    border-color: #2780E3; 
 
} 
 

 
.btn-lg, 
 
.btn-group-lg>.btn { 
 
    padding: 0.5rem 1rem; 
 
    font-size: 1.171875rem; 
 
    line-height: 1.5; 
 
    border-radius: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='toolbar'> 
 
    <div> 
 
    <button class="button1 btn btn-primary btn-lg">Slide  it</button> 
 
    </div> 
 
    <div class="inner is-hidden"> 
 
    <a href="http:///www.google.com">Google</a> 
 
    </div> 
 
</div>