Question

我试图用jquery show和hide创建一个滑块效果，但我在网上找不到一些例子。我也一直在尝试使用jquery ui，为我的滑块设置一些滑动效果，但它不能像我想的那样工作。在我的代码我使用jQuery show和hide，我想为jQuery show和hide添加一些效果。

module SyncRAM #(parameter M = 4, N = 8)(output logic [N-1:0] Qout,
   input logic [M-1:0] Address, input logic [N-1:0] Data, input logic clk, WE);

logic [N-1:0] mem [0:(1<<M)-1];

always_comb
  Qout = mem[Address];

always_ff @(posedge clk)
  if (~WE)
    mem[Address] <= Data;

endmodule

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

如何使用jquery show和hide来创建3D滑块效果？

1 个答案: