Forum PHP.pl > Dwa jQuery z użyciem <li> = konflikt

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Dwa jQuery z użyciem <li> = konflikt

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

szmidt344

15.07.2013, 09:31:38

Witam,
Mam 2 skrypty jquery, które jeden to menu z użyciem tabeli <li> i drugi to slider również z użyciem <li>
Kiedy menu zaczyna działać, to slider też, ale przejmuje funkcję menu i obrazki zaczynają się rozciągać i chować po najechaniu.

Próbowałem z class ale to nie pomaga. Co zrobić?

Pozdrawiam

buliq

15.07.2013, 09:39:46

Zacznij od pokazania kodu

szmidt344

15.07.2013, 09:41:07

[PHP] pobierz, plaintext 
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" href="animated-menu.css"/>
 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1" type="text/javascript"></script>
	<script src="jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="animated-menu.js" type="text/javascript"></script>
 
 
<script src="js/jquery.roundabout.js"></script>
 
<script>
 
    $(document).ready(function() {
      $(".ul2").roundabout({
         autoplay: true,
         autoplayDuration: 5000,
         autoplayPauseOnHover: true
      });
   });
</script>
</head>
<body style="background-image:url('images/dark_wood.png'); background-repeat:repeat-all;">
 
	<ul class="menus"  style="width: 800px; margin-left: auto; margin-right: auto; margin-top:10px;">
		<li class="green">
			<p><a href="#">Home</a></p>
			<p class="subtext">The front page</p>
		</li>
		<li class="yellow">
			<p><a href="#">About</a></p>
			<p class="subtext">More info</p>
		</li>
		<li class="red">
			<p><a href="#">Contact</a></p>
			<p class="subtext">Get in touch</p>
		</li>
		<li class="blue">
			<p><a href="#">Submit</a></p>
			<p class="subtext">Send us your stuff!</p>
		</li>
		<li class="purple">
			<p><a href="#">Terms</a></p>
			<p class="subtext">Legal things</p>
		</li>
	</ul>
 
<center><div><ul class="ul2"  >
   <li><img width="100%" height="100%"src="images/1.png"/></li>
   <li><img width="100%" height="100%"src="images/2.png"/></li>
   <li><img width="100%" height="100%"src="images/3.png"/></li>
   <li><img width="100%" height="100%"src="images/4.png"/></li>
   <li><img width="100%" height="100%"src="images/5.png"/></li>
    <li><img width="100%" height="100%"src="images/6.png"/></li>
</ul></div>
</center>
[PHP] pobierz, plaintext

buliq

15.07.2013, 09:46:03

Ok, pokazałeś kod dla slidera, ale tutaj wróżek nie ma, więc pokaż jeszcze kod dla menu (tj chyba plik animated-menu.js)

szmidt344

15.07.2013, 09:48:30

przepraszam

[PHP] pobierz, plaintext 
$(document).ready(function(){
 
	//Fix Errors - <a href="http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/" target="_blank">http://www.learningjquery.com/2009/01/quic...-queue-buildup/</a>
 
	//Remove outline from links
	$("a").click(function(){
		$(this).blur();
	});
 
	//When mouse rolls over
	$("li").mouseover(function(){
		$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
	$("li").mouseout(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
});
[PHP] pobierz, plaintext

buliq

15.07.2013, 09:59:15

I tutaj masz problem, w pierwszym kodzie, slider przypisujesz po klasie, natomiast menu przypisujesz po tagu( li). Popraw tutaj li na ul.menus li

szmidt344

15.07.2013, 10:01:05

Pięknie dziękuję

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.