Javascript I';我正在尝试在JQuery滑块中设置DIV的动画

Javascript I';我正在尝试在JQuery滑块中设置DIV的动画,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我有一个JQuery滑块,它可以滑动一个主图像,其中包含一个DIV,其中包含一个标题和一个简短的摘录。 你可以在行动中看到它 我想为包含标题和短片的DIV设置动画(从底部开始淡入淡出或盲显效果)。我已经设法让DIV在页面加载时淡入,但一旦滑块启动,它就会再次消失。如何让它在每张幻灯片上淡出n 这是部门的css #postsnip { position:absolute; margin-top:-70px; width:843px; padding:0px; background-color:#1

我有一个JQuery滑块,它可以滑动一个主图像,其中包含一个DIV,其中包含一个标题和一个简短的摘录。 你可以在行动中看到它

我想为包含标题和短片的DIV设置动画(从底部开始淡入淡出或盲显效果)。我已经设法让DIV在页面加载时淡入,但一旦滑块启动,它就会再次消失。如何让它在每张幻灯片上淡出n

这是部门的css

#postsnip {
position:absolute;
margin-top:-70px;
width:843px;
padding:0px;
background-color:#135086;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
line-height:14px;
font-size:11px;
color:#fff;
height:40px;
padding:15px;
display: none;  
这是JS

$slider = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 3000,   // time it takes to slide in each slide (in ms)
tabSpeed: 300,      // time it takes to slide in each slide (in ms) when rotating through tabs
fx: 'scrollLeft',   // slide control: fade, scrollLeft, right etc.


init: function() {
    // set the context to help speed up selectors/improve performance
    this.context = $('#slider');

    // set tabs to current hard coded navigation items
    this.tabs = $('ul.slides-nav li', this.context);

    // remove hard coded navigation items from DOM 
    // because they aren't hooked up to jQuery cycle
    this.tabs.remove();


    // prepare slider and jQuery cycle tabs
    this.prepareSlideshow();
},

prepareSlideshow: function() {
    // initialise the jquery cycle plugin -
    // for information on the options set below go to: 
    // http://malsup.com/jquery/cycle/options.html
    $('div.slides > ul', $slider.context).cycle({
        fx: $slider.fx,
        timeout: $slider.timeout,
        speed: $slider.slideSpeed,
        fastOnEvent: $slider.tabSpeed,
        pager: $('ul.slides-nav', $slider.context),
        pagerAnchorBuilder: $slider.prepareTabs,
        before: $slider.activateTab,
        pauseOnPagerHover: true,
        pause: true
    });          
},
prepareTabs: function(i, slide) {
    // return markup from hardcoded tabs for use as jQuery cycle tabs
    // (attaches necessary jQuery cycle events to tabs)
    return $slider.tabs.eq(i);


},
activateTab: function(currentSlide, nextSlide) {
    // get the active tab
    var activeTab = $('a[href="#' + nextSlide.id + '"]', $slider.context);


    // if there is an active tab
    if(activeTab.length) {
        // remove active styling from all other tabs
        $slider.tabs.removeClass('on');
        // add active styling to active button
        activeTab.parent().addClass('on');
    }            
} }; $(function() {
// add a 'js' class to the body
$('body').addClass('js');    
// initialise the slider when the DOM is ready
$slider.init(); }); 

任何帮助都将不胜感激

我不确定是否理解,但我会尝试,将div放在滑块外,并在其高度的顶部留出一个负边距,然后将其放在一个容器中

#container>div 
{
    opacity: 0
}
代码呢

$(/*Next Button*/).click(function () {
    $(/*this or the div*/).css('opacity','0').delay(/*Sliding time*/).animate({opacity:'1'})
 )}

您可以使用“after”调用循环添加另一个函数来制作这些动画。jquery插件的名称和版本?谢谢Jason。我会调查的。新手到JS抱歉,你好,罗伯特。我使用的是jQuery1.4.1,JS是HiRoee的脚本,谢谢。我将尝试这一点,但DIV应该与幻灯片一起制作动画,而不是单击。祝我好运:)@roee,欢迎来到SO。请注意作为答案提交的代码;)感谢大家的帮助,我设法得到了我想要的,并且学到了一些关于JS的东西,所以谢谢大家!