我有一个 JQuery 滑块,其中包含一个包含标题和简短摘录的 DIV 的主图像。你可以在这里看到它的作用。
我想为包含标题和简短专家的 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(); });
任何帮助将不胜感激。