2

私がやろうとしていること：

#leftSide          #rightSide (display:none)
 _______________ _______________________________________________
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |                                               |
| category      |                                               |
|  -link        |                                               |
|  -link        |                                               |
|               |     1. content fades in on link click         |
|               |     2. new link click fades out old content   |
|               |     3. new content fades in                   |
|               |                                               |
|               |                                               |
|               |click -> fade in -> click -> fade out + fade in|  
|               |                                               |
|               |                                               |
|_______________|_______________________________________________|

カテゴリ内のリンクをクリックするたびに、#rightSideそのリンクのコンテンツでフェードインしたいのですが、新しいリンクをクリックすると、古いコンテンツがフェードアウトし、新しいコンテンツがフェードインします。リンク。

これまでのところ、リンクをクリックしてdivがフェードインすると言った方法で機能し、次に2番目のリンクをクリックすると、古いdivをフェードアウトして新しいdivをフェードインする代わりに、2番目のdivが真下でフェードインします。 。

<body>
    <script>
        $(document).ready(function() {

            $('#div_1, #div_2').addClass('js');
            $('a[rel^=div]').click(function(){
                $('#' + this.rel).fadeIn();
            });

        });
    </script>
    <!--CONTAINER-->
    <div id="container">
        <!--LEFTSIDE-->
        <div id="leftSide">
            <div class="logo"></div>
            <div class="portfolio">
                <h1>blog</h1>
                <h1>portfolio</h1>
                    <ul>
                        <li><a href="#" rel="div_1">Link 1</a></li>
                        <li><a href="#" rel="div_2">Link 2</a></li>
                    </ul>
                <h1>photography</h1>
                    <ul>
                        <li>test</li>
                        <li>another</li>
                    </ul>
            </div>
        </div>
        <!--RIGHTSIDE-->
        <div id="rightSide">
            <div id="div_1">Div 1</a>
            <div id="div_2">Div 2</a>
        </div>
    </div>
    <!--CONTAINER-->
</body>
4

2 に答える 2

2

デモjsBin

$('#div_1, #div_2').addClass('js');


$('.portfolio a').click(function(e){
  
  e.preventDefault();                      // prevent dafault anchor behav.
  
  var rel = $(this).attr('rel');           // grab our rel
  $('#'+rel).fadeIn().siblings('div').fadeOut();
  
  
});
于 2012-06-07T21:50:05.510 に答える
0

これを試して：

$(document).ready(function(){
    $('#div_1, #div_2').addClass('js');
    $('a[rel^=div]').click(function(){
        $('#' + this.rel).filter(":hidden").fadeIn().siblings(":visible").fadeOut();
    });
});

すでにアクティブなリンクをクリックしてもフェードアウトせず、新しいものと古いものの両方が同時にフェードインおよびフェードアウトします。

divが、jfriend00によって提案されているように絶対的に配置され、互いの上に配置されていることを確認してください。それ以外の場合は、最初にfadeOutを実行し、fadeOutが終了した後にfadeInを実行する必要があります。

$(document).ready(function(){
    $('#div_1, #div_2').addClass('js');
    $('a[rel^=div]').click(function(){
        var new = $('#' + this.rel).filter(":hidden");
        if (new.length) {
            new.siblings(":visible").fadeOut().promise().done(function(){
                new.fadeIn();
            });
        }
    });
});

注： 2つのスクリプトの両方ではなく、一方のみを使用してください。

于 2012-06-07T21:49:57.157 に答える