Question

我正在尝试让图像从负载左侧淡出到屏幕上的某个点。我的代码似乎没错，但是没有用，没有任何反应，请帮忙：这是我对图像动画的功能：

<script src="http://code.jquery.com/jquery-1.10.1.min.js">
   $(document).ready(function(2000,slow){
    $(".img-fade").animate({left:200, opacity:"show"}, 1500);
});
    </script>

这是我在html中实现它的地方：

<div class="latest-updates-portofolio " >
<div class=".img-fade">
<img src="img/logo.png"  width="180px" height="180px">text
</div>
</div>

并且.img-fade类是一个空白类，只是为了执行该功能。还有一个问题，如何在页面完成加载后2秒后让它动画到左边？感谢。

Answer 1

你的第一个问题掩盖了其他答案指出的许多其他问题：

<script src="http://code.jquery.com/jquery-1.10.1.min.js">
   // YOU HAVE CODE HERE
</script>

如果您的脚本标记具有src属性，则将忽略标记（您的代码）的内容。因此，您的实际代码永远不会执行。

http://jsfiddle.net/t9Z8F

应该是这样的：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
   // YOUR CODE GOES HERE
</script>

一个脚本标记包含jquery，另一个包含代码。解决此问题后，您将在控制台上看到语法错误，并可以开始调试所有问题。

Answer 2

使用setTimeout功能这会延迟你的动画

$(function(){  // DOM ready shorthand

    setTimeout(function(){
        $(".img-fade").animate({left:200, opacity:1}, 1500);
    }, 2000 ); // wait 2s before animating

});

您的class：<div class=".img-fade">使用点代替：

<div class="img-fade">

此外，如果您计划使用left属性（而不是margin-left）为元素设置动画，请确保为元素设置CSS position:（相对或绝对）！

Answer 3

您的<div class=".img-fade"> div不应该有“。”在名字的开头。它应该如下所示：<div class="img-fade"> - 其他一切看起来都不错。你的jQuery没有找到任何匹配“img-fade”的元素，因为实际名称是“.img-fade”。

Answer 4

$(document).ready(function(2000,slow){  //syntax error

你不能在函数（）中传递参数，这是一个语法错误

Uncaught SyntaxError：意外的数字。

试试这个

   $(document).ready(function () {
        $(".img-fade").animate({
            left: 200,
            opacity: "show" // wrong instead use 0
        }, 1500);
    });

opacity: "show"错误，而是使用opacity: 0

选中此JSFiddle

jquery动画图像不起作用

4 个答案: