如何使用 jquery 显示和隐藏创建 3D 滑块效果？答案

【问题标题】：How to use jquery show and hide to create a 3D slider effect?如何使用 jquery 显示和隐藏创建 3D 滑块效果？
【发布时间】：2016-08-30 07:55:29
【问题描述】：

我正在尝试使用 jquery 显示和隐藏创建滑块效果，但我在网上找不到一些示例。我也一直在尝试使用 jquery ui，为我的滑块设置一些滑动效果，但它不像我想要的那样工作。在我的代码中我使用 jQuery 显示和隐藏，我想为 jQuery 显示和隐藏添加一些效果。

    <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>

【问题讨论】：

请更好地解释你想要的结果，也许添加一个例子。
@Matthias 我在点击时尝试使用此代码：hide("slide", { direction: "left" }, 2000);和显示（“幻灯片”，{方向：“左”}，2000）； .幻灯片效果不像我想要的那样工作。我可以在 jQuery show 和 hide 上使用什么来滑动？
Sliding divs horizontally with JQuery的可能重复

标签： jquery html css wordpress jquery-ui

【解决方案1】：

你可以利用Animate.css 做这样的事情

$( 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>

【讨论】：