JQuery плагин флип-шоу и содержания скрыть

Question

на самом деле я не программист, я дизайнер ... много чем для тех, кто ответить на этот случай .....

я трудность претендует шоу и скрыть его содержимое на флип плагин .....

var init = function(){ 

      $("#flipTop").click(function(e){ 


       $("#flipbox").flip({ 
        dir: "top", 
        endColor: "white", 
        duration:777, 
        onEnd: function(){ 
         $("#flipbox").html(TOP); 
         $("#flipbox").css(); 
        } 
       }); 
      }); 

      $("#flipRight").click(function(e){ 
       $("#flipbox").flip({ 
        dir: "right", 
        endColor: "yellow", 
        duration:777, 
        onEnd: function(){ 
         $("#flipbox").html("RIGHT"); 
         $("#flipbox").css({ 
          color: "red", 
          background: "yellow" 
         }); 
        } 
       }); 
      }); 
      $("#flipLeft").click(function(e){ 
       $("#flipbox").flip({ 
        dir: "left", 
        endColor: "blue", 
        duration:777, 
        onEnd: function(){ 
         $("#flipbox").html("LEFT"); 
         $("#flipbox").css({ 
          color: "white", 
          background: "blue" 

         }); 
        } 
       }); 
      }); 
      $("#flipBottom").click(function(e){ 
       $("#flipbox").flip({ 
        dir: "bottom", 
        endColor: "red", 
        duration:777, 
        onEnd: function(){ 
         $("#flipbox").html("BOTTOM"); 
         $("#flipbox").css({ 
          color: "yellow", 
          background: "red" 
         }); 
        } 
       }); 
      }); 



     } 

     $(document).ready(init); 

==================================== ================================================== ============= Я думал, что вышеуказанный javascript слишком избыточен ... он должен быть упрощен для изменения отображения и скрытого содержимого

а вот HTML я попытался сделать .......

<ul id="navigation" > 
     <li class="selected"> 
      <a href="#" id="Top" rel="white" rev="777"> TOP </a></li> 
     <li><a href="#" id="Right" rel="yellow" rev="777"> RIGHT </a></li> 
     <li><a href="#" id="Left" rel="blue" rev="777"> LEFT </a></li> 
     <li><a href="#" id="Bottom" rel="red" rev="777"> BOTTOM </a></li> 
    </ul> 






<div id="container">  
<div id="flipbox" class="top"> 
TOP 
</div> 
<div id="flipbox"class="right"> 
RIGHT 
</div> 
<div id="flipbox"class="left"> 
LEFT 
</div> 
<div id="flipbox"class="bottom"> 
BOTTOM 
</div> 
</div> 

=========================== ================================================== =============

тогда я пытаюсь скомпилировать это для команды Java Script, но я не работал .... :(

$('document').ready(function(){ 
    $('#flipbox').flip(); 
    $('#navigation li a').each(function(){ 
     $(this).click(function(){ 
      $('#navigation li').each(function(){ 
       $(this).removeClass('selected'); 
      }); 
      $(this).parent().addClass('selected'); 

      var flipid=$(this).attr('id').substr(4); 
      $('#flipbox').flip({ 
       dir: $this.attr("id"), 
     endColor: $this.attr("rel"), 
     duration:$this.attr("rev"), 
       onEnd: function(){ 
      }, flipid, 1); 

      return false; 
     }); 
    }); 
}); 

то, что я хочу спросить как заставить эти работы показывать и скрывать контент после флип-эффекта при нажатии на вкладку навигации ...... Большое спасибо за ответ этой проблемыmmmm

Answer 1

Просмотреть исходный код этой страницы http://lab.smashup.it/flip/ это может помочь вам понять, так как я никогда не пробовал плавный плагин, но я готов помочь вам. !!