Question

我正在使用此代码触发点击按钮。如何在页面加载时更改此内容？

$(document).ready(function() {
    $('#slideleft button').click(function() {
    var $lefty = $(this).next();
    $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});
  });
}

我的HTML

<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner" style="left: -350px;">Animate this element's left style property</div>
</div>

我想在页面加载时没有点击按钮时滑入。

Answer 1

在文档准备好或寡妇加载时运行代码

$(document).ready(function() {
    var $lefty = $('#slideleft button').next();
    $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});
}

关于窗口加载

$(window).load(function() {
    var $lefty = $('#slideleft button').next();
    $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});
});

速度

$lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, 1000);

1000是1000毫秒，您还可以在动画完成时添加回调，有关详细信息，请转到http://api.jquery.com/animate/

Answer 2

如果您想完全加载页面，那么效果开始就可以执行此操作：

$(window).load(function () {

     var $lefty = $('#slideleft button').next();
     $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});

});

此效果在完成页面加载后开始。但是如果你想实时启动效果，你可以使用它：

$(document).ready(function () {

     var $lefty = $('#slideleft button').next();
     $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() :      0});

});

Jquery单击事件以加载事件

2 个答案: