動畫隱藏給出生澀運動到其他分區

我有2周的div並排疊壓邊。使用jQueryUI，我使用幻燈片動畫隱藏其中一個div，但另一個div無需動畫即可調整大小。點擊按鈕隱藏右div，但左div不動畫。動畫隱藏給出生澀運動到其他分區

編輯：單擊按鈕時，右（藍色）格動畫和向右隱藏。但左側（黃色）div不會改變大小。它然後重置爲100％寬度，沒有任何滑動動畫。顯示正確的div時會發生反轉。我需要的是左div動畫和右div的動畫一起調整大小。

有沒有辦法給予調整的動畫呢？ HTML：

<div class="right">right content</div> 
<div class="left"> 
    left content 
    <button onclick="toggle()">Click Me</button> 
</div>

JS：

function toggle() { 
    if($(".right").is(":visible")) { 
      $('.right').hide("slide", { 
       direction : "right" 
      }, 500); 
    } else { 
      $('.right').show("slide", { 
       direction : "right" 
      }, 500); 
    } 
}

Codepen鏈接：http://codepen.io/anon/pen/aNaNpe

來源

2016-04-25 Ramandeep Singh

不明白你想要什麼。請解釋 – Atula

@Atula，對不明的帖子感到抱歉。我編輯了原文，以更好地闡明問題。謝謝。 –

試試這個

.left { 
height: 100%; 
float: none; 
overflow: hidden; 
position:fixed; 
}

和

$(".left").css("width","100%"); 
$(".right").hide(); 
function toggle() { 
    if($(".right").is(":visible")) { 
      $('.right').hide("slide", { 
       direction : "right" 
      }); 
$(".left").animate({'width': '100%'}); 
    } else { 
      $('.right').show("slide", { 
       direction : "right" 
      }); 
     $(".left").animate({'width': '40%'}); 

    } 
}

來源

2016-04-25 14:29:02 Atula

我試過了，但無法達到預期的效果。你能否用你的解決方案編輯筆？ –

請嘗試http://codepen.io/Atula/pen/RaYZgz?editors=0010。但是這是在我身邊顯示一個白頁，也檢查你的一面。 – Atula

如果您添加背景：＃ff9身體，那麼白頁問題將得到解決。 – Atula

這裏是你在找什麼： https://codepen.io/MandeepSingh/pen/mEkJKY

在我codepen，我設置正確的（藍色）格爲「自動」的寬度和動畫按鈕單擊左div的寬度。這將藍色的div移動到最右邊（通過動畫）。當再次點擊該按鈕時，我只是將黃色div的寬度從100％恢復爲初始大小。

我想你不想在動畫中隱藏div的內容，所以我在這兩個div中放入了一些垃圾文本，以便您可以看到隨着調整大小的div移動的內容。

最後一兩件事，我遵守了我的代碼儘可能靠近你的，但你能避免使用隱藏（），顯示（）用一個標誌變量來切換按鈕單擊動畫功能。

下面的代碼...

HTML：

<div id="left"> left content 
    <button onclick="toggle()">Click Me</button> 
    <br> 
    Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
    Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
    Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
    Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam 
</div> 

<div id="right">right content 
<br><br> 
    Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
    Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
    Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
    Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam 
</div>

CSS：

html, body { 
    height: 100%; 
} 

body{ 
    font-size:13px; 
    font-family:calibri; 
} 

#right { 
    height: 100%; 
    width: auto; 
    background: #9ff; 
    overflow: hidden; 
} 

#left { 
    height: 100%; 
    float: left; 
    width: 40%; 
    background: #ff9; 
}

JS：

function toggle() 
{ 
    if($("#right").is(":visible")) 
    { 
      $('#left').animate({"width":"100%" }, 3000, function(){ 
       $("#right").hide(); 
      }); 
    } 
    else 
    { 
      $('#right').show(); 
      $('#left').animate({"width":"40%"}, 3000); 
    } 
}

- 或使用，如果你想這個JS以避免hide（）和show（）：

var flag = 0; 

function toggle() 
{ 
    if(flag == 0) 
    { 
      $('#left').animate({"width":"100%" }, 3000); 
      flag = 1; 
    } 
    else 
    { 
      $('#left').animate({"width":"40%"}, 3000); 
      flag = 0; 
    } 
}

作爲一個加號，您不必爲此動畫使用Jquery UI。

來源

2016-08-24 13:39:59

動畫隱藏給出生澀運動到其他分區

回答

相關問題