2

私はこのjqueryビジネスに非常に慣れていません。私と私の無知な質問を許してくれることがあなたの心の中にあるとしたら、私は非常に感謝しています。

私のジレンマ：2つのdivがあり、もう1つがフェードインする前に1つがフェードアウトする必要があります。

これが私のコードです：

<script type="text/javascript">
  $(document).ready(
    function(){
        $("#about").click(function () {
            $("#aboutinfo").fadeToggle();
        });
    });
</script>
    <script type="text/javascript">
  $(document).ready(
    function(){
        $("#contact").click(function () {
            $("#contactinfo").fadeToggle();
        });
    });
</script>

問題のウェブサイトはこれです。

また、両方のステートメントに独自の <script></script>タグがあるため、jqueryを間違って記述したと思いますか？

助けてくれる人に感謝します:)

編集：これは機能していないようです：

<script type="text/javascript">
  $(document).ready(
    function(){
        $("#music").click(function () {
            $("#musicinfo").fadeToggle();
            $("#about").click(function () {
            $("#aboutinfo").fadeToggle();
            $("#contact").click(function () {
            $("#contactinfo").fadeToggle();
        });
    });
</script>
4

2 に答える 2

4

アニメーションはすべて、1つのアニメーションが終了したときに呼び出されるコールバック関数を受け入れます。

$('#about').click(function() {
    $('#contactinfo, #musicinfo').fadeOut(function() {
        $('#aboutinfo').fadeIn();
    });
});

フェードするものがない場合（つまり、表示される要素がない場合）、コールバックはすぐに起動します。

...そして、はい、これはすべて1つの<script>ブロック内、および1つの$(document).readyリスナー内にある可能性があります。

$(document).ready(function() {
   $('#about').click(function() { ... });
   $('#contact').click(function() { ... });
});

IDだけでなくクラスも使用した場合は、すべての要素に対してシングルクリックハンドラーを記述できる可能性があります。何かのようなもの：

$('.header-item').click(function() {
   var target = $('#' + this.id + 'info');
   $('.info-item').not(target).fadeOut(function() {
      target.fadeIn();
   });
});
于 2012-09-07T12:03:40.920 に答える
0 
$("#button").click(function()
{
$("#div1").hide();
$("#div2").fadeIn("slow");
});

すぐにフェードアウトし、別のdivでフェードインします。

于 2014-07-30T16:55:12.253 に答える