7 秒幻灯片图像后的 Javascript答案

【问题标题】：Javascript after 7 seconds slide image7 秒幻灯片图像后的 Javascript
【发布时间】：2014-01-04 20:55:56
【问题描述】：

我试图让图像在 7 秒后向左滑动，为什么它不起作用？

HTML：

<div id="container">
    <div id="pack">
        <img id="pack" src="http://imgur.com/uGMzOGM.png">
    </div>

Javascript：

function FetchData() {
    $("#pack").css('margin-left', 0);
    $("#pack").css('margin-right', 0);
    $("#pack").animate({
        left: '-1000px'
    }, 'slow');
});
}
setTimeout(FetchData, 7000);

CSS：

#pack {
    margin: 5px auto;
    position:fixed;
}
#container {
    overflow:hidden;
}

【问题讨论】：

不要对不同的元素使用相同的 id。如果你想在它们之间共享 css/javascript，最好使用一个类。
@AlexSiri 非常感谢，我想知道为什么它不适用于我的整个项目。我刚刚将 Div 包重命名为 packDiv。 :)

标签： javascript html css testing pack

【解决方案1】：

你只是有一个语法错误。应该完全删除 }); 行：

http://jsfiddle.net/UWLsB/190/

我认为您的意思是使用 } 和 ) 在同一行上的语法，或者从以下教程中获得：

setTimeout(function () {
    // .animate call stuff here
}, 7000);

顺便说一句，您可以使用动画纯粹使用 CSS 来做到这一点：

http://jsfiddle.net/UWLsB/192/

【讨论】：

【解决方案2】：

http://jsfiddle.net/UWLsB/191/

function FetchData() {
    $("#pack").css('margin-left', 0);
    $("#pack").css('margin-right', 0);
    $("#pack").animate({
        left: '-1000px'
    }, 'slow');
}
setTimeout(FetchData, 7000);

你也可以像这样把函数的前两行合二为一

$("#pack").css({"margin-left": "0", "margin-right": "0"});

【讨论】：