在jquery中同时向上和向下滑动div [英] slide up and down div at a same time in jquery

问题描述

我有一个div为

Hi,

I have a div as

<img id="imgDownArrow"  onclick="return false;" src="Images/About_Up.png" />

<div id="div1" class="Normal_Txt" style="padding-left:0px; padding-right: 15px; ">  <span style="color: #ff6a00;">1958 -</span>
                                         <div class="Normal_Txt" style="padding-left:0px; padding-right: 15px;">
                                       

                                 </div>
                                       </div>

<div id="div8" class="Normal_Txt" style="padding-left:0px; padding-right: 15px; ">  <span style="color: #ff6a00;">1958 -</span>
                                         <div class="Normal_Txt" style="padding-left:0px; padding-right: 15px;">
                                      

                                 </div>
                                       </div>

<div id="div2" class="Normal_Txt" style="padding-left:0px; padding-right: 15px;padding-top:10px;"> <span style="color: #ff6a00;">1973 -</span>
                                                                          <div class="Normal_Txt" style="padding-left:0px; padding-right: 15px;">
                                           


                                 </div>
                                   </div>

javascript代码为

javascript code as

<script type="text/javascript">


       $(document).ready(function () {

           $("#div1").css("display", "inline");
           $("#div2").css("display", "none");
           $("#div3").css("display", "none");
           $("#div4").css("display", "none");
           $("#div5").css("display", "none");
           $("#div6").css("display", "none");
           $("#div7").css("display", "none");
           $("#div8").css("display", "none");

           $("#imgDownArrow").click(function (e) {
               e.preventDefault();
               if( $("#div1").is(":visible")) {

                   $("#div1").slideUp("slow").hide("slow", function () {

                   });
                   $("#div8").slideUp("slow").show("slow");
                   return false;

               }
               if ($("#div2").is(":visible")) {
                   $("#div2").slideUp("slow").hide("slow", function () {

                   });
                   $("#div3").slideUp("slow").show("slow");
                   return false;
               }
               if ($("#div3").is(":visible")) {
                    $("#div3").slideUp("slow").hide("slow", function () {

                   });
                   $("#div4").slideUp("slow").show("slow");
                   return false;
               }


               e.preventDefault();
               return false;
           });
       });
    </script>

我想要当用户点击按钮时我想要一个div应该会滑动，同时另一个div应该占用它位置。具有平滑的效果。

I want when user click on button i want one div should slideup and at the same time another div should occupy its position .with a smooth effect.

推荐答案

（document）.ready（function（）{

(document).ready(function () {

（＃div1 ）.css（display，inline）;

("#div1").css("display", "inline");

（＃div2）。css（display，none）;

("#div2").css("display", "none");

这篇关于在jquery中同时向上和向下滑动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！