Question

我是一个javascript / jquery新手，但我试图建立一个包含多个div的交互式页面。当我们将鼠标移过鼠标离开div时，这些Div会启动并返回正常状态。单击时div会放大，并且＆＃34;返回＆＃34;按钮＆＃34;必须把div转回＆＃34;正常＆＃34;州。我的问题是当单击后退按钮时div的行为，它开始恢复正常，但之后再次放大。我知道我可以通过移动＆＃34;按钮来解决问题。超出div，但还有其他解决方案吗？另外，如何＆＃34;停止＆＃34;放大DIV时不透明度会发生变化吗？在各种情况下尝试了stop（）函数但到目前为止没有成功...... 谢谢你的帮助。

以下是HTML代码：

<div id='container'>
    <div id='back_button'>BACK</div>
</div>

这里是jQuery

$(document).ready(function () {
    $('#container').hover(function () {
        $(this).fadeTo('fast', 1);
    }, function () {
        $(this).fadeTo('fast', 0.8);
    }).click(function () {
        $(this).stop().animate({
            width: "600px",
            height: "600px",
            opacity: 1
        });
        $('#back_button').fadeTo('fast', 1);
    });
    $('#back_button').click(function () {
        $(this).stop( true, true ).parent().animate({
            width: "200px",
            height: "100px"
        });
    });
});

我还在jsfiddle

上创建了一个示例

Answer 1

停止单击后退按钮以向上传播到父级，并且可以使用类在元素放大时禁用悬停事件。

$(document).ready(function () {
    $('#container').hover(function () {
        if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 1);
    }, function () {
        if ( ! $(this).hasClass('large') ) $(this).fadeTo('fast', 0.8);
    }).click(function () {
        $(this).animate({
            width: "600px",
            height: "600px",
            opacity: 1
        }).addClass('large');
        $('#back_button').fadeTo('fast', 1);
    });
    $('#back_button').click(function (e) {
        e.stopPropagation();
        $(this).parent().animate({
            width: "200px",
            height: "100px"
        }).removeClass('large');
    });
});

FIDDLE

Answer 2

请使用此更新代码

 $(document).ready(function () {
        $('#container').hover(function () {
            $(this).stop().fadeTo('fast', 1);
        }, function () {
            $(this).stop().fadeTo('fast', 0.8);
        }).click(function (e) {

            if(e.target.id=="back_button" || $(this).width()>200){

                return;
            }
            $(this).stop().animate({
                width: "600px",
                height: "600px",
                opacity: 1
            });
            $('#back_button').fadeTo('fast', 1);
        });
        $('#back_button').click(function () {
            $('#container').animate({
                width: "200px",
                height: "100px",

            });

        });
    });

防止堆栈动画

2 个答案: