在页面加载时添加动画（从左/右滑动等）答案

【问题标题】：Adding animate (slide from left/right etc.) on page load在页面加载时添加动画（从左/右滑动等）
【发布时间】：2012-11-20 14:09:47
【问题描述】：

我想在页面加载时添加一些动画。我尝试了几次，但没有成功。你能帮我做一个 jquery hack 吗？

HTML & Jquery部分：

    <div class="MainPozEstate"><a href=""><img src="assets/img/mrk-sng.png" alt="Acarkent Markavilla"/></a></div>
    <script type="text/javascript">
        jQuery( document ).ready( function($) {
            $( ".MainPozEstate a" ).mouseover( function() {
                $( this ).children( "img" ).stop( true, true ).animate({
                    opacity: 0.6
                }, 200, "swing", function() {
                    $( this ).animate({
                        opacity: 1
                    }, 400 );
                });
            });
        });
    </script>

CSS 行：

.MainPozEstate {float:left;width:980px;margin:0px auto;padding-top:30px;text-align:center;}
.MainPozEstate img {border:none;margin:0px auto;}

谢谢。

【问题讨论】：

看起来您的动画是在mouseover 上触发的，而不是在页面加载时触发的。这是故意的吗？

标签： jquery onload effect

【解决方案1】：

如果您想添加其他效果，则可以再调用一次。 http://jsfiddle.net/fedmich/w8HzE/2/

jQuery( document ).ready( function($) {
    $( ".MainPozEstate a" ).mouseover( function() {
        $( this ).children( "img" ).stop( true, true ).animate({
            opacity: 0.6
        }, 200, "swing", function() {
            $( this ).animate({
                opacity: 1
            }, 400 );
        });
    });

    //
});

jQuery( document ).ready( function($) {
    //do your other effects here or just trigger/call mouseover if you want.
    $( ".MainPozEstate a" ).mouseover();
});

我认为您的代码正在运行，http://jsfiddle.net/fedmich/w8HzE/

【讨论】：

是的，我添加了它。但我想为MainPozEstate'divs image 添加另一个动画效果。当您在浏览器上打开页面时，该图像应该从左侧开始滑动，然后在 4 5 秒后停止动画。