Question

我在一个页面上有两个盒子，当你按下一个蓝色的盒子时，一个用动画向右扩展。蓝色框变为红色框，该框应该是恢复其原始大小（宽度）和位置的按钮。（第二个盒子应该保持在右上角。）一旦它再次缩小到原始大小，按钮应该变回蓝色并且过程可以再次开始，这样就可以继续扩展和收缩。

$(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');
});
});

我不知道我要做些什么让它起作用...我已经尝试在最小化代码部分摆弄正确的值，但它似乎不喜欢它，只是扩展越来越多。（我也将扩展值设置为右：'1％'将其置于同一位置，但是当我点击红色框时它不会做任何事情。）这可能与我改变的类有关expT到minT？

这是一个可以玩的链接：

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

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

Pbob

Answer 1

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

中更新了小提琴

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

这会使box1恢复原始大小。

jQuery使用正确的属性进行扩展和契约动画

1 个答案: