ソースコードはこちら: JSfiddle
$(document).ready(function () {
$("#slide-link").click(function ()
{
$("#slider").hide("slide", { direction:"down" }, 1000);
});
});
問題は次のとおりです。 「ここをクリック」リンクを作成して、その緑色のブロックで落ちて一番下に留まるようにするにはどうすればよいですか (緑色のブロックが消え、「ここをクリック」リンクが一番下にとどまります)。「ここをクリック」を 2 回目 (一番下) に押すと、すべてが表示されます (リンクを 2 回クリックすると、最初のクリックが削除されます)。その結果、2 回クリックしてもページに変化はありません。
初めに; 高さの値が減少したときに問題が発生する場合は、css 構造を変更する必要があります。次に、外部クラスを使用して、オブジェクトがアクティブかどうかを理解する必要があります。
jQuery:
$("#slide-link").click(function (){
if (!$(this).hasClass('active')) {//if clicked object has not got class active
$("#slider").stop().animate({'bottom':'-401px'}, 1000);
$(this).addClass('active');
}else{
$("#slider").stop().animate({'bottom':'0px'}, 1000);//added stop to prevent
$(this).removeClass('active'); //create an animate conflict
}
});
CSS:
#global-container {
background-image : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
height : 400px;
overflow:hidden;
}
編集: クリックテキストも下にスライドさせたい場合は、このjsFiddleの例を調べてください。
次のコードを試してください。
jQuery:
$("#slide-link").click(function () {
if($("#slider").is(":visible")){
$("#slider").hide("slide", { direction:"down" }, 1000);
$("#slide-link").animate({top: '380px'}, 1050)
} else if($("#slider").is(":hidden")) {
$("#slider").show("slide", { direction:"down" }, 1000);
$("#slide-link").animate({top: '0px'}, 950)
}
});
CSS の変更:
#global-container
{
background-image : url(http://www.google.com/logos/2012/javelin-2012-hp.jpg);
height: 400px; /* Added Height */
overflow: hidden; /* Added Overflow Property */
}
#slider
{
margin : 20px 0 0 0; /* Added Top Margin */
width : 100px;
height : 400px;
background : green;
position : relative;
}
/* Added New Style */
#slide-link
{
position: absolute;
top:0;
left:0;
z-index:9999;
height: 20px;
}