javascript - 尝试向我的 jquery 幻灯片添加额外的标题动画

Question

所以我为我的主页下载了一个幻灯片。它带有 2 个动画文本标题(H2 和 H3)，它们从屏幕左侧滑入中心。我现在正在尝试添加一行额外的文本 (H4)，它应该从右边滑入……有几秒钟的延迟。

我已经相应地编辑了网页和 .css 文件，但是我不太确定我确切知道该做什么的 javascript，我不想把它弄得一团糟。

我将在此处粘贴处理标题动画的部分 js 文件(如有必要，我还将整个文件粘贴在本文的底部)。

        // titles animation
            $nextSlide.find('div.ei-title > h2')
                  .css( 'margin-right', 50 + 'px' )
                  .stop()
                  .delay( this.options.speed * this.options.titlesFactor )
                  .animate({ marginRight : 0 + 'px', opacity : 1 },  
            this.options.titlespeed, this.options.titleeasing )
                  .end()
                  .find('div.ei-title > h3')
                  .css( 'margin-right', -50 + 'px' )
                  .stop()
                  .delay( this.options.speed * this.options.titlesFactor )
                  .animate({ marginRight : 0 + 'px', opacity : 1 }, 
         this.options.titlespeed, this.options.titleeasing )

这是 css 文件(已编辑以将添加的文本包含为“H4”):

.ei-slider{
	position: relative;
	width: 100%;
	max-width: 1999px;
	height: 500px;
	margin: 0 auto;
}
.ei-slider-loading{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index:999;
	background: rgba(0,0,0,0.9);
	color: #fff;
	text-align: center;
	line-height: 400px;
}
.ei-slider-large{
	height: 100%;
	width: 100%;
	position:relative;
	overflow: hidden;
}
.ei-slider-large li{
	position: absolute;
	top: 20px;
	left: 0px;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
.ei-slider-large li img{
	width: 100%;
}
.ei-title h4{
	position: absolute;
	left: 50%;
	margin-right: 13%;
	top: 30%;
}

.ei-title h2, h3{
	position: absolute;
	right: 50%;
	margin-right: 13%;
	top: 30%;
}

.ei-title h2, .ei-title h3{
	text-align: right;
}

.ei-title h4 {
        text-align: left;
}

.ei-title h2{
	font-size: 40px;
	line-height: 50px;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	color: #b5b5b5;
}
.ei-title h3{
	font-size: 20px;
	line-height: 20px;
	font-family: 'Open Sans Condensed', sans-serif;
	text-transform: uppercase;
	color: #000;
}

.ei-title h4{
	font-size: 10px;
	line-height: 20px;
	font-family: 'sans-serif'; italic;
	text-transform: uppercase;
	color: #f0ffff;
}




/* the thumbs... */

.ei-slider-thumbs{
	height: 1px;
	margin: 0 auto;
	position: relative;
}
.ei-slider-thumbs li{
	position: relative;
	float: left;
	height: 10%;
}
.ei-slider-thumbs li.ei-slider-element{
	top: 0px;
	left: 0px;
	position: absolute;
	height: 10%;
	z-index: 10;
	text-indent: -9000px;
	background: #000;
	background: rgba(0,0,0,0.9);
}
.ei-slider-thumbs li a{
	display: block;
	text-indent: -9000px;
	background: #666 ;
	width: 100%;
	height: 100%;
	cursor: pointer;
	-webkit-box-shadow: 
        0px 1px 1px 0px rgba(0,0,0,0.3), 
        0px 1px 0px 1px rgba(255,255,255,0.5);
	-moz-box-shadow: 
        0px 1px 1px 0px rgba(0,0,0,0.3), 
        0px 1px 0px 1px rgba(255,255,255,0.5);
	box-shadow: 
        0px 1px 1px 0px rgba(0,0,0,0.3), 
        0px 1px 0px 1px rgba(255,255,255,0.5);
	-webkit-transition: background 0.2s ease;
    -moz-transition: background 0.2s ease;
    -o-transition: background 0.2s ease;
    -ms-transition: background 0.2s ease;
    transition: background 0.2s ease;
}
.ei-slider-thumbs li a:hover{
	background-color: #f0f0f0;
}
.ei-slider-thumbs li img{
	position: absolute;
	bottom: 10px;
	opacity: 0;
	z-index: 999;
	max-width: 100%;
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
	-webkit-box-reflect: 
        below 0px -webkit-gradient(
            linear, 
            left top, 
            left bottom, 
            from(transparent), 
            color-stop(50%, transparent), 
            to(rgba(255,255,255,0.3))
            );
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ei-slider-thumbs li:hover img{
	opacity: -1;
	bottom: -1px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}


@media screen and (max-width: 830px) {
	.ei-title{
		position: absolute;
		right: 0px;
		margin-right: 0px;
		width: 100%;
		text-align: center;
		top: auto;
		bottom: 10px;
		background: #fff;
		background: rgba(255,255,255,0.9);
		padding: 5px 0;
	}
	.ei-title h2, .ei-title h3, .ei-title h4 {
		text-align: center;
	}
	.ei-title h2{
		font-size: 30px;
		line-height: 24px;
	}
	.ei-title h3{
		font-size: 20px;
		line-height: 20px;
	}
	
	.ei-title h4{
		font-size: 10px;
		line-height: 20px;
	}
}

以及网页上的html/js代码:

 <div class="wrapper">
                <div id="ei-slider" class="ei-slider">
                    <ul class="ei-slider-large">
						<li>
                            <img src="uploads/2016/01/slider-3.jpg" alt="image01">
                            <div class="ei-title">
                                <h2>High end Management Tools</h2>
                                <h3>Available at your fingertips!</h3>
                                <h4>With the available technologies, we provide the methods and tools that will help society to excel to new heights</h4>
                            </div>
                        </li>
                        <li>
                            <img src="uploads/2016/01/about-1.jpg" alt="image02" />
                            <div class="ei-title">
                                <h2>Enterprises, Administration Managers</h2>
                                <h3>Improve your Performance!</h3>
                                <h4>Regardless of your position, we have the solutions for all levels of professionals, and students alike.... </h4>
                            </div>
                        </li>
                        <li>
                            <img src="uploads/2016/01/home-parallax.jpg" alt="image03" />
                            <div class="ei-title">
                                <h2>Stunning Solutions</h2>
                                <h3>For Remarkable results!</h3>
                                <h4>We are bringing today's technology to assist the traditional family with promising results.</h4>
                            </div>
                        </li>
                        
                    </ul><!-- ei-slider-large -->

 </div><!-- ei-slider -->
           
        </div><!-- wrapper -->
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.eislideshow.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#ei-slider').eislideshow({
				animation			: 'center',
				autoplay			: true,
				slideshow_interval	: 6000,
				titlesFactor		: 0
            });
        });
    </script>

哦，最后是整个 javascript 文件:

 
 
 (function( window, $, undefined ) {
 	
 	/*
 	* smartresize: debounced resize event for jQuery
 	*
 	* latest version and complete README available on Github:
 	* https://github.com/louisremi/jquery.smartresize.js
 	*
 	* Copyright 2011 @louis_remi
 	* Licensed under the MIT license.
 	*/
 
 	var $event = $.event, resizeTimeout;
 
 	$event.special.smartresize 	= {
 		setup: function() {
 			$(this).bind( "resize", $event.special.smartresize.handler );
 		},
 		teardown: function() {
 			$(this).unbind( "resize", $event.special.smartresize.handler );
 		},
 		handler: function( event, execAsap ) {
 			// Save the context
 			var context = this,
 				args 	= arguments;
 
 			// set correct event type
 			event.type = "smartresize";
 
 			if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
 			resizeTimeout = setTimeout(function() {
 				jQuery.event.handle.apply( context, args );
 			}, execAsap === "execAsap"? 0 : 100 );
 		}
 	};
 
 	$.fn.smartresize 			= function( fn ) {
 		return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
 	};
 	
 	$.Slideshow 				= function( options, element ) {
 	
 		this.$el			= $( element );
 		
 		/***** images ****/
 		
 		// list of image items
 		this.$list			= this.$el.find('ul.ei-slider-large');
 		// image items
 		this.$imgItems		= this.$list.children('li');
 		// total number of items
 		this.itemsCount		= this.$imgItems.length;
 		// images
 		this.$images		= this.$imgItems.find('img:first');
 		
 		/***** thumbs ****/
 		
 		// thumbs wrapper
 		this.$sliderthumbs	= this.$el.find('ul.ei-slider-thumbs').hide();
 		// slider elements
 		this.$sliderElems	= this.$sliderthumbs.children('li');
 		// sliding div
 		this.$sliderElem	= this.$sliderthumbs.children('li.ei-slider-element');
 		// thumbs
 		this.$thumbs		= this.$sliderElems.not('.ei-slider-element');
 		
 		// initialize slideshow
 		this._init( options );
 		
 	};
 	
 	$.Slideshow.defaults 		= {
 		// animation types:
 		// "sides" : new slides will slide in from left / right
 		// "center": new slides will appear in the center
 		animation			: 'sides', // sides || center
 		// if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
 		autoplay			: false,
 		// interval for the slideshow
 		slideshow_interval	: 3000,
 		// speed for the sliding animation
 		speed			: 1000,
 		// easing for the sliding animation
 		easing			: '',
 		// percentage of speed for the titles animation. Speed will be speed * titlesFactor
 		titlesFactor		: 0.60,
 		// titles animation speed
 		titlespeed			: 900,
 		// titles animation easing
 		titleeasing			: '',
 		// maximum width for the thumbs in pixels
 		thumbMaxWidth		: 150
     };
 	
 	$.Slideshow.prototype 		= {
 		_init 				: function( options ) {
 			
 			this.options 		= $.extend( true, {}, $.Slideshow.defaults, options );
 			
 			// set the opacity of the title elements and the image items
 			this.$imgItems.css( 'opacity', 0 );
 			this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 );
 			
 			// index of current visible slider
 			this.current		= 0;
 			
 			var _self			= this;
 			
 			// preload images
 			// add loading status
 			this.$loading		= $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el );
 			
 			$.when( this._preloadImages() ).done( function() {
 				
 				// hide loading status
 				_self.$loading.hide();
 				
 				// calculate size and position for each image
 				_self._setImagesSize();
 				
 				// configure thumbs container
 				_self._initThumbs();
 				
 				// show first
 				_self.$imgItems.eq( _self.current ).css({
 					'opacity' 	: 1,
 					'z-index'	: 10
 				}).show().find('div.ei-title > *').css( 'opacity', 1 );
 				
 				// if autoplay is true
 				if( _self.options.autoplay ) {
 				
 					_self._startSlideshow();
 				
 				}
 				
 				// initialize the events
 				_self._initEvents();
 			
 			});
 			
 		},
 		_preloadImages		: function() {
 			
 			// preloads all the large images
 			
 			var _self	= this,
 				loaded	= 0;
 			
 			return $.Deferred(
 			
 				function(dfd) {
 			
 					_self.$images.each( function( i ) {
 						
 						$('<img/>').load( function() {
 						
 							if( ++loaded === _self.itemsCount ) {
 							
 								dfd.resolve();
 								
 							}
 						
 						}).attr( 'src', $(this).attr('src') );
 					
 					});
 					
 				}
 				
 			).promise();
 			
 		},
 		_setImagesSize		: function() {
 			
 			// save ei-slider's width
 			this.elWidth	= this.$el.width();
 			
 			var _self	= this;
 			
 			this.$images.each( function( i ) {
 				
 				var $img	= $(this);
 					imgDim	= _self._getImageDim( $img.attr('src') );
 					
 				$img.css({
 					width		: imgDim.width,
 					height		: imgDim.height,
 					marginLeft	: imgDim.left,
 					marginTop	: imgDim.top
 				});
 				
 			});
 		
 		},
 		_getImageDim		: function( src ) {
 			
 			var $img    = new Image();
 							
 			$img.src    = src;
 					
 			var c_w		= this.elWidth,
 				c_h		= this.$el.height(),
 				r_w		= c_h / c_w,
 				
 				i_w		= $img.width,
 				i_h		= $img.height,
 				r_i		= i_h / i_w,
 				new_w, new_h, new_left, new_top;
 					
 			if( r_w > r_i ) {
 				
 				new_h	= c_h;
 				new_w	= c_h / r_i;
 			
 			}
 			else {
 			
 				new_h	= c_w * r_i;
 				new_w	= c_w;
 			
 			}
 					
 			return {
 				width	: new_w,
 				height	: new_h,
 				left	: ( c_w - new_w ) / 2,
 				top		: ( c_h - new_h ) / 2
 			};
 		
 		},
 		_initThumbs			: function() {
 		
 			// set the max-width of the slider elements to the one set in the plugin's options
 			// also, the width of each slider element will be 100% / total number of elements
 			this.$sliderElems.css({
 				'max-width' : this.options.thumbMaxWidth + 'px',
 				'width'		: 100 / this.itemsCount + '%'
 			});
 			
 			// set the max-width of the slider and show it
 			this.$sliderthumbs.css( 'max-width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show();
 			
 		},
 		_startSlideshow		: function() {
 		
 			var _self	= this;
 			
 			this.slideshow	= setTimeout( function() {
 				
 				var pos;
 				
 				( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1;
 				
 				_self._slideTo( pos );
 				
 				if( _self.options.autoplay ) {
 				
 					_self._startSlideshow();
 				
 				}
			
 			}, this.options.slideshow_interval);
 		
 		},
 		// shows the clicked thumb's slide
 		_slideTo			: function( pos ) {
 			
 			// return if clicking the same element or if currently animating
 			if( pos === this.current || this.isAnimating )
 				return false;
 			
 			this.isAnimating	= true;
 			
 			var $currentSlide	= this.$imgItems.eq( this.current ),
 				$nextSlide		= this.$imgItems.eq( pos ),
 				_self			= this,
 				
 				preCSS			= {zIndex	: 10},
 				animCSS			= {opacity	: 1};
 			
 			// new slide will slide in from left or right side
 			if( this.options.animation === 'sides' ) {
 				
 				preCSS.left		= ( pos > this.current ) ? -1 * this.elWidth : this.elWidth;
 				animCSS.left	= 0;
 			
 			}	
 			
 			// titles animation
 			$nextSlide.find('div.ei-title > h2')
 					  .css( 'margin-right', 50 + 'px' )
 					  .stop()
 					  .delay( this.options.speed * this.options.titlesFactor )
 					  .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
 					  .end()
 					  .find('div.ei-title > h3')
 					  .css( 'margin-right', -50 + 'px' )
 					  .stop()
 					  .delay( this.options.speed * this.options.titlesFactor )
 					  .animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
 			
 			$.when(
 				
 				// fade out current titles
 				$currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() {
 					// reset style
 					$(this).show().css( 'opacity', 0 );	
 				}),
 				
 				// animate next slide in
 				$nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ),
 				
 				// "sliding div" moves to new position
 				this.$sliderElem.stop().animate({
 					left	: this.$thumbs.eq( pos ).position().left
 				}, this.options.speed )
 				
 			).done( function() {
 				
 				// reset values
 				$currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 );
 					_self.current	= pos;
 					_self.isAnimating		= false;
 				
 				});
 				
 		},
 		_initEvents			: function() {
 			
 			var _self	= this;
 			
 			// window resize
 			$(window).on( 'smartresize.eislideshow', function( event ) {
 				
 				// resize the images
 				_self._setImagesSize();
 			
 				// reset position of thumbs sliding div
 				_self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left );
 			
 			});
 			
 			// click the thumbs
 			this.$thumbs.on( 'click.eislideshow', function( event ) {
 				
 				if( _self.options.autoplay ) {
 				
 					clearTimeout( _self.slideshow );
 					_self.options.autoplay	= false;
 				
 				}
 				
 				var $thumb	= $(this),
 					idx		= $thumb.index() - 1; // exclude sliding div
 					
 				_self._slideTo( idx );
 				
 				return false;
 			
 			});
 			
 		}
 	};
 	
 	var logError 				= function( message ) {
 		
 		if ( this.console ) {
 			
 			console.error( message );
 			
 		}
 		
 	};
 	
 	$.fn.eislideshow			= function( options ) {
 	
 		if ( typeof options === 'string' ) {
 		
 			var args = Array.prototype.slice.call( arguments, 1 );
 
 			this.each(function() {
 			
 				var instance = $.data( this, 'eislideshow' );
 				
 				if ( !instance ) {
 					logError( "cannot call methods on eislideshow prior to initialization; " +
 					"attempted to call method '" + options + "'" );
 					return;
 				}
 				
 				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
 					logError( "no such method '" + options + "' for eislideshow instance" );
 					return;
 				}
 				
 				instance[ options ].apply( instance, args );
 			
 			});
 		
 		} 
 		else {
 		
 			this.each(function() {
 			
 				var instance = $.data( this, 'eislideshow' );
 				if ( !instance ) {
 					$.data( this, 'eislideshow', new $.Slideshow( options, this ) );
 				}
 			
 			});
 		
 		}
 		
 		return this;
 		
 	};
 	
 })( window, jQuery );

My slider in action

Answer 1

您的插件的 jQuery 代码，即您附加的第一个片段，正在寻找每个元素(h2 和 h3)并依次为它们制作动画。

之后只需为 h4 添加相同的代码，并对像素值应用您想要的任何更改。

        // titles animation
        $nextSlide.find('div.ei-title > h2')
              .css( 'margin-right', 50 + 'px' )
              .stop()
              .delay( this.options.speed * this.options.titlesFactor )
              .animate({ marginRight : 0 + 'px', opacity : 1 },  
        this.options.titlespeed, this.options.titleeasing )
              .end()
              .find('div.ei-title > h3')
              .css( 'margin-right', -50 + 'px' )
              .stop()
              .delay( this.options.speed * this.options.titlesFactor )
              .animate({ marginRight : 0 + 'px', opacity : 1 }, 
     this.options.titlespeed, this.options.titleeasing )
              .end()
              .find('div.ei-title > h4')
              .css( 'margin-right', -150 + 'px' )
              .stop()
              .delay( this.options.speed * this.options.titlesFactor )
              .animate({ marginRight : 0 + 'px', opacity : 1 }, 
     this.options.titlespeed, this.options.titleeasing )

如您所见，我告诉它设置 margin-right 为 -150px，以应用 h3 和 h4 之间的相同差异因为介于 h2 和 h3 之间，但您可以选择最适合您需要的值。