jQuery 动画使用正确的属性扩展和收缩

Question

我在一个页面上有 2 个框，当您按下一个蓝色框时，其中一个会向右扩展并带有动画。蓝色方框变为红色方框，应该是将其恢复为原始大小(宽度)和位置的按钮。 (第二个盒子应该留在右上角。)一旦它再次收缩到原来的大小，按钮应该变回蓝色，这个过程可以重新开始，这样扩展和收缩就可以继续发生。

$(document).ready(function () {

//open & close 1 //open & close 2... (irrelevant code omitted here, just some extra buttons)

//minimise 1
$(".minT").click(function () {
    $('.box1').animate({right:'+=49.5%'}, "slow");
});
//change minimise to expand
$(".minT").click(function () {
$('.minT').removeClass('minT').addClass('expT');
});

//expand 1 & close 2
$(".expT").click(function () {
    $('.box2').animate(
    {width:'20px',
    height:'20px',
    right:'75px',
    top:'5px',
    bottom:'show',
    left:'90%'}, "fast", function(){
        $('.box1').animate({right:'-=49.5%'}, "slow", function(){
});});});
//change expand button to a minimise button
$(".expT").click(function () {
$('.expT').removeClass('expT').addClass('minT');
});
});

我不知道我必须做些什么才能让它工作...我尝试在最小化代码部分调整正确的值，但它似乎不喜欢它，只是扩展得越来越多。 (我还将扩展值设置为 right:'1%'，这将它放在了相同的位置，但是当我单击红色框时它不会执行任何操作。)这可能与我从expT 到 minT？

这是一个可以玩的链接:

http://jsfiddle.net/c7SLV/1/

感谢您提前给我的任何帮助!

鲍勃

Answer 1

当您删除类时，您必须unbind("click")。删除它并添加新类后，它仍然执行旧类的点击事件。我在

中更新了 fiddle

$(".expT").click(function () {
        $('.expT').removeClass('expT').unbind("click").addClass('minT').click(function(){
            $('.box1').animate({right:'+=49.5%'}, "slow");
        });
});

这会使 box1 恢复到其原始大小。