Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Problem mit jquery Slider und animiertem Menü...“

mint

Nicht mehr ganz neu hier

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

Aktives Mitglied

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

Nicht mehr ganz neu hier

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.858
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben