jquery - jQuery滑动动画

我是第一次建立网站。我想从一个图像滑块开始。我想制作动画。因此，我刚刚创建了一个div，并在其中放置了h1和span标记以及一些文本。我想设置动画使其从顶部和侧面滑入。我在Google上做了一些事情，但是我不太擅长使用jquery-ui和css-transistions。我想为h1和span元素设置动画，例如下面URL RENO HTML Template中的元素。任何获得此类动画的链接都将对我有所帮助。

提前致谢。

<div id="slideshow" align="center">
    <div id="black">
        <h1>Black</h1>
        <span>black</span>
    </div>
</div>

最佳答案

使用jQueryUI真的很容易。您可以尝试在以下几行中做一些事情：

$( document ).click(function() { // I put on click to visualize it, but you can do it on whatever event you like, mouseover, page load and so on
   $( "h1" ).toggle( "slide" , {
        direction: 'left'
    }, 500); // You can specify how fast you want your animation to be, the unit is milliseconds
});

为了回答评论，这里是在准备好文档（demo）上滑动的替代方法：

HTML：

<div id="slideshow" align="center">
    <div id="black">
        <h1>Black</h1>
        <span>black</span>
    </div>
</div>

CSS：

#black {
    position: relative;
    margin-top: 200px;
    width: 100px;
}

h1 {
    position: absolute;
    top: -250px;
    left: 0px;
}

$("h1").animate({
   "top":"0px"
},1200);