Question

我在互联网上找到了一个教程。使用jquery为动画制作动画。我会在我网站的标题中设置h1标签的动画。我希望在我的网站上标题中有一个标识。我将此代码用于动画。

/* Slogan (h1) effect header */
$(function () {
    // make sure your h2's have a position relative
    $('#header h1').css({
        left: '600px'
    })

    jQuery.easing.def = 'easeOutBounce';
    setTimeout(animate, 1000);
});

function animate() {
    $('#header h1').animate({
        left: 0
    }, 1000);
}

/* Effect op logo */
$(function () {

    $('#header .logo').css({
        top: '-600px'
    })

    jQuery.easing.def = 'easeOutBounce';
    setTimeout(animate, 1000);
});

function animate() {
    $('#header .logo').animate({
        top: 0
    }, 1000);
}

对于这个动画，我使用了jquery.easing1.3插件。现在来问题了。用我的代码。只会对徽标产生影响。对h1的影响将会发挥作用。我应该做什么？ h1徽标和header.logo动画????

谢谢!!!!

Answer 1

你已经覆盖了第二个animate() ...你可以重命名它来修复问题......

/* Effect op logo */

$(function () {

    $('#header .logo').css({
        top: '-600px'
    })

    jQuery.easing.def = 'easeOutBounce';
    setTimeout(animate2, 1000);
});

function animate2() {
    $('#header .logo').animate({
        top: 0
    }, 1000);
}

Answer 2

/* Slogan (h1) effect header */
$(function () {
    // make sure your h2's have a position relative
    $('#header h1').css({
        left: '600px'
    })

    jQuery.easing.def = 'easeOutBounce';
    setTimeout(animate, 1000);
});

function animate() {
    $('#header h1').animate({
        left: 0
    }, 1000);
}

/* Effect op logo */
$(function () {

    $('#header .logo').css({
        top: '-600px'
    })

    jQuery.easing.def = 'easeOutBounce';
    setTimeout(animate, 1000);
});

function animateAgain() {
    $('#header .logo').animate({
        top: 0
    }, 1000);
}

Answer 3

虽然Neurofluxation的解决方案可行（但在我完成这篇文章的时候，毫无疑问会被编辑掉的错误除外），这里有一些一般的不良实践问题。

首先，如果您在同一页面中拥有所有这些代码，那么会有很多重复。我建议你重构一些，让你的代码更可重用。此外，即使$(function () { });语句将合并，也无需明确地将它们分开。这只会增加你真正不感兴趣的代码量。

我就是这样做的：

$.easing.def = 'easeOutBounce';

$(function () {
    $('#header h1').css({ left: '600px' });
    $('#header .logo').css({ top: '-600px' });

    setTimeout(animateAll, 1000);
});

function animateAll() {
    $('#header h1').animate({ left: 0 }, 1000);
    $('#header logo').animate({ top: 0 }, 1000);
}

很好，干，你不觉得吗？ =）

jQuery缓解插件问题

3 个答案: