0

我是第一次做网站。我想从图像滑块开始。我想为它制作动画。所以我刚刚创建了一个 div 并放置了一些h1并span带有一些文本的标记。我想为它们设置动画，使其从顶部和侧面滑入。我在谷歌上做了一些关于它的事情，但我不擅长使用jquery-uiand css-transistions。我想为下面的 URL RENO HTML 模板h1中的元素设置动画。任何获取此类动画的链接都会对我有所帮助。span

提前致谢。

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

2 回答 2

0

这是我试图解释 jQuery 如何提供帮助的最简单尝试：

首先，你想找到你的元素。这可以使用以下方法完成：

$('name');

插入 # 用于 id 和 . 上课

例如，如果您想获取 id 为黑色的 div 的子项，请执行以下操作：

$('#black').children();

然后，您可以动画然后给定一个特定的动作：

$('#black').children().on('click', function() {
    $(this).slideUp();
});

将this使用您用于查找元素的行对您获得的元素起作用。然后只需在其上调用 slideUp() 即可使其向上滑动。还有其他几种选择可以点击。

搜索如何包含 jQuery，并确保将此代码编写在单独的 .js 文件中。

于 2013-11-07T10:56:33.547 回答
0

使用 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
});

至于回答评论，这里是滑动文档准备好的替代方法（演示）：

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;
}

JS

$("h1").animate({
   "top":"0px"
},1200);
于 2013-11-07T10:57:53.800 回答