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 淡入，然后我点击第二个链接，然后第二个 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>
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 的建议绝对定位，以便它们彼此重叠。否则，您必须先淡出，然后在淡出完成后淡入。

$(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();
            });
        }
    });
});

注意：只使用两个脚本之一，不能同时使用。

于 2012-06-07T21:49:57.157 回答