Problem mit jquery Slider und animiertem Menü...

mint · 19.09.2010

Hy, ich habe mir einen Slider integriert und wollte nun noch mein Menü etwas aufpeppen. Hierzu habe ich mir ein animiertes Menü geladen. Das Problem ist nun, dass das Menü zwar funktioniert, aber der Slider nun nicht mehr. Anstatt 5 Bilder zu wechseln werden diese untereinander angezeigt !?

Kann jemand helfen ? Danke vorab....Mint

HTML:

   <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easySlider1.5.js"></script>

 <script type="text/javascript"> 

$(document).ready(function(){	
	$("#slider").easySlider({
		auto: true,
		continuous: true 
	});
});
</script>

<script type="text/javascript" src="jquery.min.js"></script>
	<script language="javascript">
		$(document).ready(function() {

			/* 	1st example	*/

			/// wrap inner content of each anchor with first layer and append background layer
			$("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

			// loop each anchor and add copy of text content
			$("#menu li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu li a").hover(function() {
				// this function is fired when the mouse is moved over
				$(".out",	this).stop().animate({'top':	'45px'},	250); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		250); // move down - show
				$(".bg",	this).stop().animate({'top':	'0px'},		120); // move down - show

			}, function() {
				// this function is fired when the mouse is moved off
				$(".out",	this).stop().animate({'top':	'0px'},		250); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	250); // move up - hide
				$(".bg",	this).stop().animate({'top':	'-45px'},	120); // move up - hide
			});
					

			/*	2nd example	*/
			
			$("#menu2 li a").wrapInner( '<span class="out"></span>' );
			
			$("#menu2 li a").each(function() {
				$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			$("#menu2 li a").hover(function() {
				$(".out",	this).stop().animate({'top':	'45px'},	200); // move down - hide
				$(".over",	this).stop().animate({'top':	'0px'},		200); // move down - show

			}, function() {
				$(".out",	this).stop().animate({'top':	'0px'},		200); // move up - show
				$(".over",	this).stop().animate({'top':	'-45px'},	200); // move up - hide
			});

		});

	</script>
       
</head>
      
<body>
          
        <div id="container"> 
                 
        <div id="bg-header">
        
        
   
        <img src="images/bg-header.jpg" />
        
       
      
        

        
        <div id="menu" class="menu">
			<ul>
				<li><a href="index.html">START</a></li>
				<li><a href="javascript:;">PRODUKTE</a></li>
				<li><a href="javascript:;">REFERENZEN</a></li>
				<li><a href="javascript:;">ÜBER UNS</a></li>
				<li><a href="javascript:;">KONTAKT</a></li>
			</ul>
		</div>
        
          </div>
        
        
     
       
   <div id="sidebarAll">
     <h1>Neues ...</h1>
       
          <p></p>
          
          <br>
          <br>
          
          <div id="slider">
		<ul>				
			<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
			<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>			
		</ul>
	
</div>
          
   
       </div>

fexx · 20.09.2010

AW: Problem mit jquery Slider und animiertem Menü...

Code:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="easySlider1.5.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){    
    $("#slider").easySlider({
        auto: true,
        continuous: true 
    });
    
    /*     1st example    */

    /// wrap inner content of each anchor with first layer and append background layer
    $("#menu li a").wrapInner( '<span class="out"></span>' ).append( '<span class="bg"></span>' );

    // loop each anchor and add copy of text content
    $("#menu li a").each(function() {
        $( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
    });

    $("#menu li a").hover(function() {
        // this function is fired when the mouse is moved over
        $(".out",    this).stop().animate({'top':    '45px'},    250); // move down - hide
        $(".over",    this).stop().animate({'top':    '0px'},        250); // move down - show
        $(".bg",    this).stop().animate({'top':    '0px'},        120); // move down - show

    }, function() {
        // this function is fired when the mouse is moved off
        $(".out",    this).stop().animate({'top':    '0px'},        250); // move up - show
        $(".over",    this).stop().animate({'top':    '-45px'},    250); // move up - hide
        $(".bg",    this).stop().animate({'top':    '-45px'},    120); // move up - hide
    });
            
});
</script>


       
</head>
      
<body>
          
        <div id="container"> 
                 
        <div id="bg-header">
        
        
   
        <img src="http://www.psd-tutorials.de/modules/Forum/images/bg-header.jpg" />
        
       
      
        

        
        <div id="menu" class="menu">
            <ul>
                <li><a href="index.html">START</a></li>
                <li><a href="javascript:;">PRODUKTE</a></li>
                <li><a href="javascript:;">REFERENZEN</a></li>
                <li><a href="javascript:;">ÜBER UNS</a></li>
                <li><a href="javascript:;">KONTAKT</a></li>
            </ul>
        </div>
        
          </div>
        
        
     
       
   <div id="sidebarAll">
     <h1>Neues ...</h1>
       
          <p></p>
          
          <br>
          <br>
          
          <div id="slider">
        <ul>                
            <li><a href="http://templatica.com/preview/30"><img src="http://www.psd-tutorials.de/modules/Forum/images/01.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/7"><img src="http://www.psd-tutorials.de/modules/Forum/images/02.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/25"><img src="http://www.psd-tutorials.de/modules/Forum/images/03.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/26"><img src="http://www.psd-tutorials.de/modules/Forum/images/04.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/27"><img src="http://www.psd-tutorials.de/modules/Forum/images/05.jpg" alt="Css Template Preview" /></a></li>            
        </ul>
    
</div>
          
   
       </div>

versuchs mal so ...

mint · 20.09.2010

AW: Problem mit jquery Slider und animiertem Menü...

@fexx

Danke, ein, zwei Korrekturen und es funktioniert

Kannst du mir kurz erläutern auf was ich achten muss wenn ich mehrere jquery plugs benutzen will ?

Gruß, Mint