1

www.rambocats.comにアクセスすると、ページが読み込まれると、この中央下のdivが1〜2秒間表示され、その後消えます。（Divはピンクの文字で「ギャラリーII」と言います）。ページの約2/3までスクロールしたときにのみ表示されるはずです。初期ロード時に表示されないようにするにはどうすればよいですか？

jQueryは次のとおりです。

$(document).ready(function(){
var open = false;
$('#homiesSlideButton').click(function() {
    if(open === false) {
        $('#homiesSlideContent').animate({ height:'610px' });
        $(this).css('backgroundPosition', 'bottom left');
               $("#homies-wrapper img").peTransitionHilight({   // image highlight/transitions plugin
                                        slideshow:true, 
                                        transition:"all", 
                                        duration:1500, 
                                        delay:4444, boost:0.3
                                  });
        open = true;
    } else {
        $('#homiesSlideContent').animate({ height: '0px' });
        $(this).css('backgroundPosition', 'top left');
        open = false;
    }
});
});

$("#homiesSlideButton").hide();
$(window).scroll(function(){
if($(window).scrollTop()>4444){               // position on page when button appears
     $("#homiesSlideButton").fadeIn();
  }else{
     $("#homiesSlideButton").fadeOut();
  }
});  


$(window).scroll(function(){
if($(window).scrollTop()>4444){               // position on page when button disappears
     $("#homiesSlideContent").fadeIn();
  }else{
     $("#homiesSlideContent").fadeOut();
  }
});

4

4 に答える 4

9

何が起こっているのかというと、デフォルトで表示されるように設定されているため、javascript/jqueryが実行される前に表示されて非表示になります。

最初から表示されるべきではないアイテムに対して私が行う傾向があるのは、display: none;またはvisibility: hidden;に設定されているCSSクラスをそれらに追加することです。

.hide {
    display: none;
}

次に、jqueryを使用して、を呼び出した後にクラスを削除し.hide()ます。要素について：

$('#elementId').hide().removeClass('hide');
于 2012-09-12T23:03:24.323 に答える
1

それは次のように単純にすることができます：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Let's hide and show a div</title>

<style type="text/css">
#myHiddenDiv { visibility: hidden; }
</style>

</head>

<body>

<div id="myHiddenDiv">
Hidden until after the script loads. It will be imperceptible in most cases. But if    you comment out or remove the script, the div will indeed be hidden!
</div>


<script type="text/javascript">
document.getElementById('myHiddenDiv').style.visibility = 'visible';
</script>

</body>
</html>
于 2013-03-26T16:48:45.493 に答える
0

.hide()イベントをアニメーション化していると思います。要素style="display:none;"のhtmlの一部として試してください。$("#homiesSlideButton")

于 2012-09-12T23:02:38.397 に答える
0

divのCSSで、プロパティを持つようにdivを設定します

visibility: hidden;

ページが読み込まれると、

$("#yourDivId").show();
于 2012-09-12T23:03:11.373 に答える