Question

我有3个DIV，每个33.3333％，应点击动画。

<div id="wrapper">
<div id="left" class="links">LINKS</div>
<div id="middle" class="mitte">MITTE</div>
<div id="right" class="rechts">RECHTS</div>
<div class="clear"></div>

点击的DIV应该增加到60％，其他两个应该缩小到20％。

但我没有任何jQuery技能，所以我在网上搜索了解决方案。我发现的唯一解决方案是悬停而非点击。

    $("#left, #middle, #right").each(function() {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #middle, #right").hover(function() {
    $(this).animate({
        width: "60%"
    }, 300 );
    $(this).parent().children().not(this).animate({
        width: "20%"
    }, 300 );
}, function() {
    $(this).parent().children().each(function() {
        $(this).animate({
            width: $(this).data("standardWidth")
        }, 300 );
    });
});

正如你可以看到here悬停它工作正常，但我怎样才能将其更改为点击？

有人可以提供帮助吗？

先谢谢

和Thorsten

Answer 1

将代码更改为：

$("#left, #middle, #right").each(function () {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #middle, #right").click(function () {
    $(this).animate({
        width: "60%"
    }, 300);
    $(this).parent().children().not(this).animate({
        width: "20%"
    }, 300);
});

<强> jsFiddle example

我所做的就是将hover更改为click并删除第二个功能。

这是一个 second version ，允许第二次点击恢复原始宽度。

$("#left, #middle, #right").each(function () {
    $(this).data("standardWidth", $(this).width());
});
$("#left, #middle, #right").click(function () {
    if ($(this).data('active')) {
        $(this).parent().children().each(function () {
            $(this).animate({
                width: $(this).data("standardWidth")
            }, 300);
        });
        $(this).data('active', 0);
    } else {
        $('#wrapper div').data('active', 0);
        $(this).data('active', 1);
        $(this).animate({
            width: "60%"
        }, 300);
        $(this).parent().children().not(this).animate({
            width: "20%"
        }, 300);
    }
});

Answer 2

将.hover更改为.click即可。

动画3 DIV的onClick

2 个答案: