jQuery動畫切換

這是一個非常簡單的問題。我基本上在頁面上有一個div塊，單擊時，它的大小會增大，再次單擊時會返回到原來的大小。我的問題是，它似乎根本沒有工作。此外，我敢肯定，在這兩種動畫狀態之間切換的方式比這樣的if語句更切換，但我不知道如何去做。jQuery動畫切換

$(document).ready(function(){ 
    var toggle = 0; 
    $(".login").click(function(){ 
     if($toggle == 0){ 
      $(this).animate({ 
       height: '200', 
      }, 500, function(){ 
      }); 
      $toggle = 1; 
     } 
     else if($toggle == 1){ 
      $(this).animate({ 
       height: '100', 
      }, 500, function(){ 
      }); 
      $toggle = 0; 
     } 
    }); 
});

對應的HTML代碼只是

<div class="login">Click Me</div>

讓我知道，如果需要別的。

來源

2012-02-20 Xenostar

它不工作，因爲你初始化'toggle'用'0'但使用'整個代碼的其餘部分$ toggle'。 – 2012-02-20 18:44:00

您的代碼不工作，因爲你已經使用在一個地方toggle和$toggle在另一個。

但是，這可以更簡單地做過這樣的：

$(document).ready(function(){ 
    $(".login").toggle(function() { 
     $(this).animate({height: '200'}); 
    }, function() { 
     $(this).animate({height: '100'}); 
    }); 
});

工作演示在這裏：http://jsfiddle.net/jfriend00/5Wu6m/

當作爲參數的函數列表中，.toggle(fn1, fn2)方法給定的開始功能之間交替與第一個。這會自動跟蹤您的切換狀態 - 您不必這樣做。

jQuery doc是here。根據所用的參數，有多種形式的.toggle（），因此在搜索jQuery文檔時並不總是找到正確的。

來源

2012-02-20 18:47:54 jfriend00

謝謝，這就是我一直在尋找的。 – Xenostar 2012-02-20 19:22:26

是否可以將高度設置爲「自動」高度，因此高度取決於內容而不是固定的？ – Amesey 2015-03-09 17:39:53

@Amesey - 據我所知，jQuery不能動畫到「自動」高度。它需要從當前高度動畫到其他已知高度。我認爲你必須弄清楚如何測量汽車的高度以便製作汽車的高度。 – jfriend00 2015-03-09 21:41:40

通知

var toggle = 0;

和

if($toggle == 0){

你定義一個名爲toggle變量，然後用它作爲$toggle之間的差異。

來源

2012-02-20 18:43:33

嘗試

$(".login").click(function(){ 
    $(this).slideToggle(500); 
}

來源

2012-02-20 18:44:18 romo

'slideToggle'顯示並隱藏該元素，它不僅僅設置兩個值之間的高度。 – 2012-02-20 18:45:54

+1詹姆斯....我沒有足夠重視。 – romo 2012-02-20 18:54:38

我看到兩個問題。一個是你的切換變量的範圍。另一個是在動畫屬性列表中的單個屬性之後的通用屬性。試試這個：

$(document).ready(function(){ 
    $(".login").click(function(){ 
     if($(this).hasClass('expanded')){ 
      $(this) 
       .removeClass('expanded') 
       .stop() 
       .animate({height: '100px'}, 500) 
      ; 
     } 
     else{ 
      $(this) 
       .addClass('expanded') 
       .stop() 
       .animate({height: '200px'}, 500) 
      ;     
     } 
    }); 
});

來源

2012-02-20 18:48:25 devstruck

var H=H==200?100:200; 
$(".login").on('click', function(){ 
    $(this).animate({height: H}, 500, function() {H=H==200?100:200;}); 
});

FIDDLE

來源

2012-02-20 18:54:51 adeneo

我要捍衛你切換解決方案，它不是不正確。

在某些情況下代碼只這樣會正常運行，而.toggle()會做一些奇怪的事情。

改爲只if($toggle == 0){...你需要使用if (toggle === 0){

來源

2014-10-10 11:29:14 wix

jQuery動畫切換

回答

相關問題