• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Wie Effect nur auf das angeklickte DIV Element anwenden. Nicht auf alles anderen.

P

pepesan

Neues Mitglied
Hallo,

ich habe folgenden Code geschrieben.

Ich würde es gerne so haben das der animate und show effect nur auf das Div Element angewendet wir wo ich gerade mit der Maus draufstehe.
Das andere mit der Klasse "ani" versehene Div Element soll so bleiben wie es ist.

Wie mache ich das?

Code: 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin: 0;padding:0;}
a{color:white;text-decoration:none;}
div{padding:15px; color: white;float:left;background: blue;border: 1px solid black; width: 100px; height: 100px;}
ul{list-style: none; position:relative; margin: -55px 0 0 20px;}
.ani{cursor: pointer;}
 .ani p{padding-top: 75px;position: relative;test-transform: uppercase;}
 .ani p span{font-size: 30px;}
</style>

'<script>var ps = $.noConflict();
ps(document).ready(function(){
  ps("div.ani ul").hide();
   // onmouseover
    ps(".ani").mouseenter(function(){
    ps(this).animate({opacity: '0.5'},100);
    ps(this).children("p").animate({bottom: '75px'},"slow");
    ps(this).children("ul").show("slow");
	
   // onmouseout
    ps(".ani").mouseleave(function(){
    ps(this).children("ul").hide("slow");
    ps(this).children("p").animate({bottom: '0px'},"slow");
    ps(this).animate({opacity: '1'},"slow");
  });
  });
});
</script>'
</head>
<body>

<div class="ani"><p><span>01</span> Start</p>
<ul>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
</ul>
</div>
<div></div>
<div class="ani"><p><span>02</span> Profil</p>
<ul>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
</ul>
</div>
<div></div>
</body>
</html>
 
Zuletzt bearbeitet:
Vielen Dank. Das klappt soweit.
ich habe nun den Jquery Teil ein wenig verändert.
Allerdings habe ich noch ein Problem.
Zuerst soll das "p" Element nach oben geschoben werden und gleichzeitig soll das "div" mit 'opacity' durchsichtiger werden und das "ul" Element soll erscheinen.
Wenn ich aber in kurzen abständen über das animierte "div" gehe funktionieren die einzelnen Effekte nicht mehr so wie sie sollen.
Das "ul" Element erscheint obwohl das "p" element immer noch an der gleichen Stelle steht und das 'opacity' geht auch nicht.
Etwas später wenn ich mit der Maus wieder runter bin, dann verschiebt sich das "p" Element und das 'opacity' kommt auch etwas später.

Wie kann ich das abstellen.
Code: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin: 0;padding:0;}
a{color:white;text-decoration:none;}
a:hover{text-decoration: underline;}
div{padding:15px; color: white;float:left;background: blue;border: 1px solid black; width: 100px; height: 100px;}
ul{list-style: none; position:relative; margin: -55px 0 0 20px;}
.ani{cursor: pointer;}
 .ani p{padding-top: 75px;position: relative;test-transform: uppercase;}
 .ani p span{font-size: 30px;}
</style>

<script>
var ps = $.noConflict();
ps(document).ready(function(){
  ps("div.ani ul").hide();
   // onmouseover
    ps(".ani").mouseenter(function(){
    ps(this).animate({opacity: '0.5'},100);
    ps(this).children("p").animate({bottom: '75px'},"slow");
    ps(this).children("ul").show("slow");
    
   // onmouseout
    ps(".ani").mouseleave(function(){
    ps(this).children("ul").hide("slow");
    ps(this).children("p").animate({bottom: '0px'},"slow");
    ps(this).animate({opacity: '1'},"slow");
  });
  });
});
</script>
</head>
<body>

<div class="ani"><p><span>01</span> Start</p>
<ul>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
</ul>
</div>
<div></div>
<div class="ani"><p><span>02</span> Profil</p>
<ul>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
<li><a href="">test</a></li>
</ul>
</div>
<div></div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben