Question

我是第一次创建网站。我想用图像滑块开始它。我想给它制作动画。所以我刚刚创建了一个div，并在其中添加了一些h1和span标记。我想让它们动画从顶部和侧面滑入。我确实谷歌有些事情，但我不善于使用jquery-ui和css-transistions。我想为h1和span元素制作动画，例如以下网址RENO HTML Template中的元素。获得这样的动画的任何链接都会对我有帮助。

提前致谢。

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

Answer 1

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

首先，您要查找您的元素。这可以使用：

完成

$('name');

插入＃为ids和。对于班级

例如，如果你想让id为黑色的div的孩子，请执行以下操作：

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

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

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

this将使用您用于查找元素的行来处理您获得的元素。然后只需在其上调用slideUp（）即可向上滑动。还有其他几种替代方法可以点击。

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

Answer 2

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

JS

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

jQuery幻灯片放入和缩小动画

2 个答案: