How to use jquery show and hide to create a 3D slider effect?

Question

Im trying to create a slider effect with jquery show and hide, but i can not find some examples on the net. I also been trying with jquery ui, to set some sliding effect to my slider, but Its not working like I want. In my code Im using jQuery show and hide, and I want to add some effects to jQuery show and hide.

    <script type="text/javascript">

        jQuery( document ).ready(function() {

            setTimeout(function() {      
                jQuery('.targetDiv').hide();
                jQuery('#div1').css("display", "block");
            },1000);

            jQuery('.showSingle').on('click', function() {
                jQuery('.targetDiv').hide();
                jQuery('#div'+jQuery(this).attr('target')).show();
            });

        });
        </script>

        <div class="buttons">
            <a class="showSingle" target="1"><button>1</button></a>
            <a class="showSingle" target="2"><button>2</button></a>
            <a class="showSingle" target="3"><button>3</button></a>
            <a class="showSingle" target="4"><button>4</button></a>
        </div>

        <div id="div1" class="targetDiv"><?php echo do_shortcode( '[drawattention ID="48"]');?></div>
        <div id="div2" class="targetDiv"><?php echo do_shortcode( '[drawattention ID="87"]');?></div>
        <div id="div3" class="targetDiv"><?php echo do_shortcode( '[drawattention ID="92"]');?></div>
        <div id="div4" class="targetDiv"><?php echo do_shortcode( '[drawattention ID="111"]');?></div>


    </div>

Please explain your wanted result better, maybe add an example. — matthiasunt, Aug 30 '16 at 08:16
@Matthias I have tried with this code on click: hide("slide", { direction: "left" }, 2000); and show("slide", { direction: "left" }, 2000); . slide effect is not working like I want. What can I use on jQuery show and hide to slide? — Tony, Aug 30 '16 at 08:29
Possible duplicate of [Sliding divs horizontally with JQuery](http://stackoverflow.com/questions/9864305/sliding-divs-horizontally-with-jquery) — matthiasunt, Aug 30 '16 at 08:40

score 0 · Accepted Answer · answered Aug 31 '16 at 07:08

You can make use of Animate.css and do something like this

$( document ).ready(function() {

            setTimeout(function() { 
            
            
               // $('.targetDiv').addClass("animated slideOutRight").fadeOut();
                $('#div1').css("display", "block");
            },1000);

            $('.showSingle').on('click', function() {
                $('.targetDiv').addClass("animated slideOutRight").fadeOut();
                //$('.targetDiv').fadeOut();
                $('#div'+$(this).attr('target')).removeClass("slideOutRight").addClass("animated slideInLeft").fadeIn();
            });

        
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://rawgit.com/daneden/animate.css/master/animate.min.css" rel="stylesheet"/>

<div id="main">
<div class="buttons">
            <a class="showSingle" target="1"><button>1</button></a>
            <a class="showSingle" target="2"><button>2</button></a>
            <a class="showSingle" target="3"><button>3</button></a>
            <a class="showSingle" target="4"><button>4</button></a>
        </div>

        <div id="div1" class="targetDiv">aa</div>
        <div id="div2" class="targetDiv">asd</div>
        <div id="div3" class="targetDiv">dfgh</div>
        <div id="div4" class="targetDiv">dfhgfh</div>
  </div>

How to use jquery show and hide to create a 3D slider effect?

1 Answers1