Question

我需要创建一个函数，在页面加载时动画div从左侧滑动。它需要延迟动画约5秒钟。可以在此链接中看到该示例

http://www.exacttarget.com/blog/amazon-dash-the-skinny-on-this-stick/

在标题下面有一个包含共享计数的部分。我需要创建一个函数来滑动包含所有数字汇总的项目。这是右边的灰色背景。

Answer 1

嘿，我不是Css专家，但人们所做的网站也有点来自CSS。所以我做了这个jsfiddle。这可能对你有帮助。我不确定这会在所有浏览器中如何工作到目前为止。你可以使用jQuery作为不支持CSS3 Transition的浏览器的后退我使用的代码是：

div
{
   width:100px;
   height:100px;
   background:red;
   transition-property: margin-left;
   transition-duration: 2s;
   -webkit-transition-property: margin-left; /* Safari */
   -webkit-transition-duration: 2s; /* Safari */
    margin-left:-100px;
}
div.active
{
   margin-left:0px;
}

jQuery代码是：

$(function(){

$(".mydiv").addClass("active");
console.log($(".mydiv"));

});

Fiddle

Answer 2

 $(document).ready(function () {
      $("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});

Answer 3

HTML

<div id="upper_div"></div>
<div id="slideBox"></div>

CSS

#upper_div{
    width:200px;
    height:50px;
    background-color:#E5E5E5;
    float:left;
}

#slideBox{
    width:50px;
    height:50px;
    background-color:#CCCCCC;
    float:left;
    display:none;
}

的jQuery

$(document).ready(function () {
      $("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});

DEMO

页面加载时滑动div

3 个答案: