jQuery顯示/隱藏方向

Question

我在代碼中有三個div。一個是修復，一個是信息，一個是細節。

功能：最初我只想顯示修復和信息部分，一旦點擊信息我想顯示細節和修復，並點擊細節我想顯示修復和信息。

對於這個部分，請找到工作鏈接：Working Example

$(document).ready(function() { 
     $("#detail").hide(); 

    $("#info").click(function() { 
      $("#info").hide(); 
      $('#detail').show(); 
    }); 

    $("#detail").click(function() { 
      $("#info").show(); 
      $("#detail").hide(); 
    }); 
}); 

我的問題是：

在這個例子中，我想展示的細節部分向左側移動的方式，解決部分應總是被修復。

在這裏你可以看到修復部分正在向右移動。

Answer 1

你也可以通過更新你的CSS /風格來做到這一點。

Jsfiddle在下面。

\t $(document).ready(function() { 
 
    \t \t \t \t $("#detail").hide(); 
 
    \t \t \t \t 
 
    \t \t \t $("#info").click(function() { 
 
\t \t \t \t \t $("#info").hide(); 
 
    \t \t \t \t \t $('#detail').show(); 
 
\t \t \t }); 
 

 
\t \t \t $("#detail").click(function() { 
 
\t \t \t \t \t $("#info").show(); 
 
    \t \t \t \t \t $("#detail").hide(); 
 
\t \t \t }); 
 
\t \t }); 
 
\t \t \t

#fix { 
 
\t width: 297px; 
 
\t -moz-border-radius: 4px; 
 
\t -webkit-border-radius: 4px; 
 
\t -khtml-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t font: normal normal 13px Arial, Helvetica, Geneva, sans-serif; 
 
\t color: #929392; 
 
\t background: grey; 
 
\t margin: 0 auto; 
 
\t margin-top: 50px; 
 
\t text-align:left; 
 
\t position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
\t display:inline-block; 
 
    height: 400px; 
 
} 
 

 
#info { 
 
\t width: 30px; 
 
\t -moz-border-radius: 4px; 
 
\t -webkit-border-radius: 4px; 
 
\t -khtml-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t font: normal normal 13px Arial, Helvetica, Geneva, sans-serif; 
 
\t color: #929392; 
 
\t background: lightblue; 
 
\t margin: 0 auto; 
 
\t margin-top: 50px; 
 
\t text-align:left; 
 
\t display: inline-block; 
 
\t height:400px; 
 
} 
 

 
#detail { 
 
\t width: 80px; 
 
\t -moz-border-radius: 4px; 
 
\t -webkit-border-radius: 4px; 
 
\t -khtml-border-radius: 4px; 
 
\t border-radius: 4px; 
 
\t font: normal normal 13px Arial, Helvetica, Geneva, sans-serif; 
 
\t color: #929392; 
 
\t background: silver; 
 
\t margin: 0 auto; 
 
\t margin-top: 50px; 
 
\t text-align:left; 
 
\t display: inline-block; 
 
\t height:400px; 
 
} 
 

 
#info, 
 
#detail{ 
 
    position: absolute; 
 
    right: 297px; 
 
} 
 

 

 
#main{ 
 
\t margin-left: auto; 
 
    margin-right: auto; 
 
    width: 410px; 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="main"> 
 
    <div id="info"> 
 
     Info 
 
    </div> 
 
    <div id="detail"> 
 
     Detail 
 
    </div> 
 
    <div id="fix"> 
 
     fix 
 
    </div> 
 
    
 
    
 
    
 
</div>

Answer 2

$(document).ready(function() { 
    $("#detail").hide(); 

    $("#info").click(function() { 
     $("#info").css({"width":'100%'}).animate({"width":'0%'},200).hide(); 
     $('#detail').show().css({"width":'0'}).animate({"width":'100%'},200); 
    }); 

    $("#detail").click(function() { 
     $("#info").show().css({"width":'0'}).animate({"width":'100%'},200); 
     $("#detail").css({"width":'100%'}).animate({"width":'0%'},200).hide(); 
    }); 
}); 

你可以使用它。它會工作。 爲平滑可能你必須使用溢出隱藏容器

Answer 3

我把你的細節和信息裏面修復，然後使用位置絕對定位它們。嘗試代碼段.. =）

$(document).ready(function() { 
 
    $("#detail").hide(); 
 

 
    $("#info").click(function() { 
 
    $("#info").hide(); 
 
    $('#detail').show(); 
 
    }); 
 

 
    $("#detail").click(function() { 
 
    $("#info").show(); 
 
    $("#detail").hide(); 
 
    }); 
 
});

#info { 
 
    position: absolute; 
 
    width: 30px; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    -khtml-border-radius: 4px; 
 
    border-radius: 4px; 
 
    font: normal normal 13px Arial, Helvetica, Geneva, sans-serif; 
 
    color: #929392; 
 
    background: lightblue; 
 
    margin-left: -30px; 
 
    text-align: left; 
 
    float: none; 
 
    display: inline-block; 
 
    height: 400px; 
 
} 
 
#detail { 
 
    position: absolute; 
 
    width: 80px; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    -khtml-border-radius: 4px; 
 
    border-radius: 4px; 
 
    font: normal normal 13px Arial, Helvetica, Geneva, sans-serif; 
 
    color: #929392; 
 
    background: silver; 
 
    margin-left: -80px; 
 
    text-align: left; 
 
    float: none; 
 
    display: inline-block; 
 
    height: 400px; 
 
} 
 
#fix { 
 
    width: 297px; 
 
    -moz-border-radius: 4px; 
 
    -webkit-border-radius: 4px; 
 
    -khtml-border-radius: 4px; 
 
    border-radius: 4px; 
 
    font: normal normal 13px Arial, Helvetica, Geneva, sans-serif; 
 
    color: #929392; 
 
    background: grey; 
 
    margin: 0 auto; 
 
    margin-top: 50px; 
 
    text-align: left; 
 
    float: right; 
 
    display: inline-block; 
 
    height: 400px; 
 
} 
 
#main { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 410px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="main"> 
 
    <div id="fix"> 
 
    <div id="info"> 
 
     Info 
 
    </div> 
 
    <div id="detail"> 
 
     Detail 
 
    </div> 
 
    fix 
 
    </div> 
 
</div>

Answer 4

嘗試使用此，它應該幫助 -

$("#info").click(function() { 
     $("#info").hide(); 
     $('#detail').show(); 
     $('#detail').css('margin-left', '-50px'); 
}); 

Answer 5

你有你的div的順序更改爲

<div id="main"> 
    <div id="fix"> 
     fix 
    </div> 
    <div id="detail"> 
     Detail 
    </div> 
    <div id="info"> 
     Info 
    </div> 
</div> 

並將您的所有float: left替換爲float: right，雖然總是有一個問題，你是否應該首先在這裏使用浮動。

Answer 6

這裏是簡單的語法使用這種效果

selector.hide |播放|肘節（ 「滑動」，{}參數，速度）;
下面是一個簡單的例子，一個簡單的顯示這種效應的用法 -
jQuery的實例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 

    <script type="text/javascript" language="javascript"> 

    $(document).ready(function() { 

     $("#hide").click(function(){ 
      $(".target").hide("slide", { direction: "down" }, 2000); 
     }); 

     $("#show").click(function(){ 
      $(".target").show("slide", {direction: "up" }, 2000); 
     }); 
    }); 
    </script> 

    <style> 
    p {background-color:#bca; width:200px; border:1px solid green;} 
    div{ width:100px; height:100px; background:red;} 
    </style> 
     </head> 
    <body> 

    <p>Click on any of the buttons</p> 

    <button id="hide"> Hide </button> 
    <button id="show"> Show</button> 

    <div class="target"> 
    </div> 
    </body>  </html>