Question

我正在尝试做什么：

#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淡入，然后我点击第二个链接，然后第二个div在右下方淡入而不是淡出旧的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>

Answer 1

demo 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();


});

Answer 2

试试这个：

$(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 个答案:

demo jsBin