Jquery 淡入内容，然后淡出，然后淡入新内容_Jquery

Jquery 淡入内容，然后淡出，然后淡入新内容

jquery

Jquery 淡入内容，然后淡出，然后淡入新内容,jquery,Jquery,我想做的是： #leftSide #rightSide (display:none) _______________ _______________________________________________ | | | | category | | |

我想做的是：

#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|  
|               |                                               |
|               |                                               |
|_______________|_______________________________________________|

每次我点击一个类别中的链接时，我都想淡入该链接的内容，然后如果我点击一个新链接，旧内容淡出，新内容淡入，依此类推所有其他链接

到目前为止，我的工作方式是，我点击一个链接，说div淡入，然后我点击第二个链接，然后第二个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>


$（文档）.ready（函数（）{
$（'div#u 1，'div#u 2'）.addClass（'js'）；
$（'a[rel^=div]'）。单击（函数（）{
$（'#'+this.rel.fadeIn（）；
});
});
博客
文件夹




摄影

试验
另一个

第一组
第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的建议定位，这样它们就可以相互重叠。否则，必须先淡出，然后在淡出完成后淡出

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

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

你刚才不是问了同样的问题并做了个记号吗？是的，还有？我想更进一步，我不知道怎么做，所以我想我会问。试试看，它应该能做你想做的，或者离它很近。啊，我明白了。答案并不完全正确。我会在那里注释并修复它，您只缺少一行代码<代码>$（“#右侧>div”）.fadeOut（）@KevinB所做的只是淡入淡出，然后立即淡入淡出。我希望它淡出当我点击一个不同的链接，然后淡出内容从该链接后，旧的淡出。

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