切换、淡入、淡出。打开滑块并更改内容

Question

作为一个 js 新手，我正在为滑块中的内容负载而苦苦挣扎。我有 4 个按钮。单击按钮时，我希望滑块打开，内容淡入。单击另一个按钮时，我希望滑块保持打开状态，但内容需要淡出，新内容需要淡入。

我有这个：

HTML

    <div class="standorte-wrapper">
     <div class="panel left">
       <div class="pan-item tl">
        <button href="#" id="expand" class="show-hide">TOGGLE</button>
       </div><!--
       --><div class="pan-item tr">
       <button></button>
       </div><!--
       --><div class="pan-item bl">
       <button></button>
       </div><!--
       --><div class="pan-item br">
       <button></button>
       </div>
   </div>
   <div class="panel right">
    <div class="close-button">
        <a href="#" id="close" class="close">
         <i class="icon-cancel"></i></a>
    </div>
    <h2>Everything you need to know</h2><!-- CONTENT TO REFRESH -->
    </div>
    </div>

JS

$(document).ready(function(){
    $("#expand").on("click", function(){
        $(".standorte-wrapper").toggleClass("expand");
    });

    $("#close").on("click", function(){
        $(".standorte-wrapper").toggleClass("expand");
    });
});

这给了我这个结果，打开和关闭

如何添加上面写的我想要的功能？我在面板中加载的内容是 .php 文件。 file1.php、file2.php、...

Answer 1

在我们合作完成 Github 后，我 post 在这里我们做了什么

https://github.com/neodev2/ajax-slide-panel

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.12.4.min.js">
    </script>
    <script>
        $(document).ready(function(){

            var ajaxUrls = [
                'snip1.html',
                'snip2.html',
                'snip3.html',
                'snip4.html'
            ];

            var ajaxFiles = [];


            for(var i=0; i<ajaxUrls.length; i++){

                $.ajax({
                    method: 'GET',
                    url: ajaxUrls[i],
                    success: function(data){
                        //console.log(data);
                        ajaxFiles.push(data);
                    }
                });

            }

            $('.pan-item > button').on('click', function(){

                if($('.panel.left').hasClass('open')){
                    //alert('already open');
                }else{
                    $('.panel.left').addClass('open');
                    $('.standorte-wrapper').addClass('expand');
                }

                $('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);

            });


            $('#close').on('click', function(){

                $('.panel.left').removeClass('open');
                $('.standorte-wrapper').removeClass('expand');

            });

        });
    </script>
    <title></title>
</head>
<body>
    <div class="standorte-wrapper">
        <div class="panel left">
            <div class="pan-item tl">
                <button data-ajaxfile="0">X</button>
            </div>
            <div class="pan-item tr">
                <button data-ajaxfile="1">X</button>
            </div>
            <div class="pan-item bl">
                <button data-ajaxfile="2">X</button>
            </div>
            <div class="pan-item br">
                <button data-ajaxfile="3">X</button>
            </div>
        </div>
        <div class="panel right">
            <div class="close-button">
                <a class="close" href="#" id="close"><i class="icon-cancel">X</i></a>
            </div>
            <div>
                <h2>Everything you need to know</h2>
                <div id="php-content"></div>
            </div>
        </div><span class="clear"></span>
    </div>
</body>
</html>

切换、淡入、淡出。打开滑块并更改内容

Toggle, fade in, fade out. Open slider and change content

javascript

fade

toggle

fadeout

fadein