javascript - 我正在尝试为 JQuery slider 中的 DIV 设置动画

Question

我有一个 JQuery slider ，幻灯片是一个主图像和一个包含标题和简短摘录的 DIV。你可以在行动中看到它 here.

我想为包含标题和空头专家的 DIV 制作动画(从底部淡入淡出或隐藏效果)。我已经设法让 DIV 在页面加载时淡入，但一旦 slider 启动它就会再次消失。我怎样才能让它在每张幻灯片上淡入淡出 n？

这是DIV的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(); }); 

如有任何帮助，我们将不胜感激。

Answer 1

不确定我是否理解，但我会尝试，将 div 放在 slider 外面并在其高度顶部留出负边距，然后将它们放入容器中，

#container>div 
{
    opacity: 0
}

代码

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