Javascript 使用Jquery设置div动画_Javascript_Jquery_Html_Css

Javascript 使用Jquery设置div动画

javascript jquery html css

Javascript 使用Jquery设置div动画,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有以下Jquery代码，用于在单击时隐藏和显示div $(document).ready(function () { $('#parapic1').click(function () { $(this).closest("#maincontainer").find('.para1').show(); $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;

我有以下Jquery代码，用于在单击时隐藏和显示div

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

现在，我想知道如何通过添加一些动画来

隐藏

和

显示

，比如

左右

或任何其他好的动画

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

谢谢：）

使用库时，您能做的最好的事情（不管是哪种语言），就是熟悉文档。如果您签出，您可以看到您可以传递不同的参数来改变函数的行为。例如，如果希望动画持续2秒，可以执行以下操作：

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

$('#myId').hide(2000);

如果你想使用更酷的效果，也许你应该去看看jQueryUI，它添加了一些东西，比如

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

$('#myId').hide('blind');

看

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

PS：正如我在上面的评论中所说的，你也应该看看选择材料的不同方法。因为只能有一个id，$（this.nexist（“#id”）根本没有意义：）

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

我希望这会有所帮助：）

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

干杯

您可以使用不同的jquery动画来设置动画：

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

$('#parapic1').click(function () {
        $('.para').fadeIn();

    });

要控制动画的速度，请执行以下操作：

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

$('#parapic1').click(function () {
            $('.para').fadeIn('fast');

        });

最灵活、最强大的jQuery运动方法是.animate（）。使用它，您可以设置许多CSS属性的动画，包括不透明度、位置（左、右、上）、大小等

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

虽然还有其他快捷方式，例如fadeOut/fadeIn（）和slideDown（），它们对于快速节省时间的动画非常有用，但animate（）将是最灵活的

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

jQuery动画语法示例

$(document).ready(function () {

    $('#parapic1').click(function () {
        $(this).closest("#maincontainer").find('.para1').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic2').click(function () {
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para2').show();
        $(this).closest("#maincontainer").find('.para3').attr('style', 'display:none;');
    });

    $('#parapic3').click(function () {
        $(this).closest("#maincontainer").find('.para3').show();
        $(this).closest("#maincontainer").find('.para2').attr('style', 'display:none;');
        $(this).closest("#maincontainer").find('.para1').attr('style', 'display:none;');
    });
});

$(parent).click(function() {
    $(child).animate({left: 50, opacity: 0}, 1000);
});

我是jquery新手，所以请不要介意我问了一些愚蠢的问题。感谢您的主题评论，但您肯定可以重新考虑该代码，这样您就不会有3次单击功能。例如，如果您再添加3段代码，会发生什么情况。@Richa，Ruchya，请检查链接@NickR任何帮助如何使其简短？？您不需要将.closest（）与ID（#）结合使用-ID是唯一的，即您的文档中只能有一个#maincontainer项。也许这是个问题-检查您是否在HTML中设置了多个id=”“属性。