トグル、フェードイン、フェードアウト。スライダーを開いてコンテンツを変更する

js noobとして、私はスライダーのコンテンツの負荷を苦労して戦っています。私は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>

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

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

それは私にこの結果をもたらし、開け閉めを与える

私は上に書いたようにしたい機能をどのように追加できますか？パネルにロードするコンテンツは.phpファイルです。 file1.php、file2.php、...

出典

2016-12-19 user3799112

はGithubの上の私たちのコラボレーションの後、私たちはこれまで

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>

やったことをここに投稿

出典

2016-12-20 12:58:08 neoDev

トグル、フェードイン、フェードアウト。スライダーを開いてコンテンツを変更する

答えて

関連する問題