多元素的jQuery UI類切換

我試圖讓div的變化類從「正常」變爲「變薄」只有如果他們有類「正常」。但不知何故，他們只是來回換，該IF聲明似乎被寫入完全錯了:)多元素的jQuery UI類切換

下面是代碼

<div class="normal">1</div> 
<div class="normal">2</div> 
<div class="normal">3</div> 
<div class="normal">4</div> 
<div class="normal">5</div> 
<div class="normal">6</div>

CSS：

.normal{ 
float:left; 
height:200px; 
width:100px; 
border:1px dotted gray; 
} 

.thin{ 
float:left; 
width:50px; 
height:200px; 
border:1px dotted gray; 
background-color:#5a5a5a; 
}

jQuery的

$(document.body).click(function() { 
    $("div").each(function() { 
    if ($(this).hasClass("normal")) { 
     $(this).toggleClass("thin", 300);   //Problem here? 
    } else { 
     this.style.color = "red"; 
    } 
    }); 
});

來源

2012-10-10 SAD

你爲什麼要開課？當事件再次觸發時，你是否需要恢復該類？ –

是的，多數民衆贊成在目標:) – SAD

@Egis按您的要求的代碼應該如下所示：

$(document.body).toggle(
    function() { 
     $("div.normal").animate({ 
      width: "50px", 
     }, "slow", function(){ $(this).addClass("thin"); }); 
    }, 
    function(){ 
     $("div.normal").animate({ 
      width: "100px", 
     }, "slow", function(){ $(this).removeClass("thin"); }); 
    } 
);

DEMO

我希望這是你在找什麼，祝你好運！

來源

2012-10-10 18:39:55

謝謝昆達德！ – SAD

ToggleClass（http://api.jquery.com/toggleClass/）w病人都會增加和刪除班級。因此，相反，你要刪除的類「正常」，並添加類「瘦身」：

$(this).removeClass("normal").addClass("thin");

關於動畫，它看起來像你正在使用jQueryUI的項目（對不起，我錯過了標記，第一時間左右）：http://jqueryui.com/toggleClass/它允許您指定動畫持續時間。考慮到這一點，你可以包括持續時間：

$(this).removeClass("normal", 300).addClass("thin", 300);

來源

2012-10-10 18:03:37 uhleeka

它的作品，但它沒有任何動畫。只需立即切換。我們的目標是製作一個好看的用戶界面，所以我需要現在以某種方式設置動畫 – SAD

如果您需要動畫來使UI看起來很好看，那麼您應該重新設計。 – MetalFrog

我同意，一些非常好的設計是可能的，而不使用動畫等，但我想更多地學習jQuery，所以即時嘗試做所有這些東西.. – SAD

你沒有刪除'normal'類，你都首先到達的if的代碼塊之後，你的div總會有'normal'class，讓您的病情在你的if將永遠是真實的。

爲此目的使用removeClass。

另外，如果你想從'normal'的class改變'thin'，使用addClass添加thin而不是toggle。

編輯：也許這是你想要什麼：

$(document.body).click(function() { 
    $("div").each(function() { 
    if ($(this).hasClass("normal")) { 
     $(this).removeClass("normal"); 
     $(this).addClass("thin"); 
    } 
    else if ($(this).hasClass("thin")) { 
     $(this).removeClass("thin"); 
     $(this).addClass("normal"); 
    } else { 
     this.style.color = "red"; 
    } 
    }); 
});

來源

2012-10-10 18:13:40

目標是讓動畫從「普通」到「瘦」類的動畫變化。而向後改變反之亦然。 – SAD

多元素的jQuery UI類切換

回答

相關問題