jquery幻燈片動畫

我想隱藏和顯示與幻燈片動畫的div。我的代碼如下：

<style> 
    div.bigBox 
      { 
      background-color:white; 
      width:100px; 
      height:125px; 
      overflow:hidden; 
      } 
      div.try{ 
      background-color:green; 
      width:100px; 
      height:125px; 
      float: left; 
      } 
      div.try2{ 
      background-color:yellow; 
      width:100px; 
      height:125px; 
      } 
    } 
    </style> 
    <script language="JavaScript" src="js/jquery-1.6.1.js"></script> 
    <script src="http://ui.jquery.com/latest/ui/jquery.effects.core.js"></script> 
    <script src="http://ui.jquery.com/latest/ui/jquery.effects.slide.js"></script> 
</head> 
<body> 
    <div class="bigBox"> 
      <div class="try"> 
       <p id="haha">CLICK THIS</p> 
       <p>This is a demonstration of jQuery SimpleDialog.</p> 
      </div> 
      <div class="try2"> 
       <h3 id="test2">CLICK THIS</h3> 
       <p>This is a demonstration of jQuery SimpleDialog.</p> 
      </div> 
    </div> 
<script> 
    $('#haha').click(function() { 
     alert("test"); 
     $('.try').hide("slide", { direction: "left" }, 1000); 
     $('.try2').show("slide", { direction: "right" }, 1000); 
    }); 
</script>

問題是一個盒子的過渡到另一個。它不流暢地流動。我想要隱藏並同時顯示（比如要隱藏框尾）。請幫忙。謝謝

來源

2011-11-14 newbie

與問題無關：在關閉樣式之前，您有一個額外的關閉花括號標籤。相關：這裏有一個小提琴（jQ 1.7使訪問jQ用戶界面更容易），任何人在刺傷它：http://jsfiddle.net/GregP/CV7fd/ –

大概有十幾方法對皮膚這隻貓，但這裏是我所做的：

一聲bigBox位置：相對
改變了試盒使用的位置是：讓他們堆在絕對互相頂部
更改了HTML的順序以確保try（不是try2）保持在最前;你可以用z-index這樣的其他方法來做：
刪除溢出：隱藏在bigBox上，並且使背景變得透明，儘管這不應該有所作爲
更改CSS以適應我的個人風格;對不起，這是一個半強迫症的事情

小提琴：http://jsfiddle.net/GregP/CV7fd/1/

我沒有系統地測試我的理論，但我認爲這是浮動這是造成你的問題。

沒有顯示「切換。嘗試的順序和.try2盒子」標記和JavaScript（這是不變），但在這裏點是更新後的CSS：

div.bigBox { 
    background-color:transparent; 
    width:100px; 
    height:125px; 
    position: relative; 
} 

.try, .try2{ 
    width:100px; 
    height:125px; 
    position: absolute; 
} 

.try { 
    background-color:green; 
} 

.try2{ 
    background-color:yellow; 
}

（拍攝，可能已經使用寬度：和高度：在bigBox上也是如此，好吧，你明白了，不需要我迂腐！）

來源

2011-11-14 03:39:16

（也FWIW，我認爲褪色看起來整潔，：http://jsfiddle.net/GregP/CV7fd/2/） –

你有一個滑塊代碼，我可以使用CSS溢出：隱藏;？因爲我上面的代碼的功能限於2個可移動的框。 Tnx – newbie

溢出：隱藏並不是我做出的必要改變。我剛測試過，沒有或沒有。很容易測試...只是訪問小提琴！ –

你有沒有考慮過在一個單獨的div（這將部分可見），只是滑動它通過改變利潤率，填充或無論你實現它嗎？

來源

2011-11-14 02:56:42 Shomz

我的代碼是在一個單獨的div ..「bigBox」和我部分隱藏它.. – newbie

好吧我想你會需要另一個（包裝和容器），但嘗試添加這些CSS規則，看看會發生什麼：margin-left：-100px;寬度：200px;我的想法是爲這兩個值設置動畫，如果它可以與頁面上的其他元素一起使用。 – Shomz

jquery幻燈片動畫

回答

相關問題