多元素的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类切换

回答

相关问题