Question

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

我想要动画（从底部褪色或失明效果）包含标题和短专家的DIV。我设法让DIV在页面加载时淡入，但一旦滑块启动它就会再次消失。如何让它在每张幻灯片上淡出？

这是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放在滑块外面，并在其高度上给它一个负边距，并将它们放在一个容器内，

#container>div 
{
    opacity: 0
}

和代码

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

我正在尝试在JQuery滑块内设置DIV动画

1 个答案: