Content Slider mit Fold effect

[newdawn005]

Hey Leute,

ich wollte mir auf meine page einen teamspeak 3 slider und Gameserverslider einbauen. jedoch nicht dieses standart auf und zu dingens sondern mit einen netten "fold" effect

hier mal mein code ohne fold effect:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

    <script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/ts_3.png', //path to the image for the tab //Optionally can be set using css
            imageHeight: '250px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '60px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'right',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '50px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '10px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>
<style type="text/css">
.slide-out-div {
	padding: 0px;
	width: 250px;
	height: 80%;
	background: url(images/ts_3_bg.png) no-repeat #313131;
	border: 0px;
	position: absolute;
}      
</style>

<script type="text/javascript">
$(document).ready(function(){
    	$("#content").hide();

    $("a.open-close").click(function () {
      $("#content").slideToggle("slow");
    });

});
</script>

so nun zu meiner frage: wie bau ich das so um das der slider den fold effect benutzt bzw wie bau ich so einen slider.

http://www.aatfclan.at <- auf dieser seite ist zu sehen wie der slider am ende aussehen soll (linke seite neben main menu)

würde mich über schnelle antwort freuen mfg newdawn

 

[Fabian Frank]

1. jQuery-UI einbinden
2. gibt es zwei Funktionen -> show/hide, beide vom Handling her nahezu indentisch. Effekte aus jQuery-UI kannst du so verwenden

$("#whatEver").show("fold", 500);