| Autor |
Nachricht |
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: 
|
Verfasst Fr 28.11.2008 11:36
Titel jQuery - folgende Elemente ansprechen |
  |
|
Hallo Zusammen,
ich habe hier eine immer sich wiederholende Ausgabe von produkten.
die verpacke ich in folgendem Konstrukt. habe das konstrukt jetzt 2 mal aufgezeigt,
damit deutlich wird das es sich wiederholt.
Ich möchte nun mittels jQuery einige Animationen einfügen die natürlich für alle Kontrukte gleich funktionieren sollen.
jetzt stehe ich gerade auf dem schlauch.
ich weiß das ich über
| Code: |
$(".tabimg2").mouseover(function(){
$(this).next(".bigimg").fadeIn("slow").css("display","block");
});
|
genau den div mit der klasse '.bigimg' einblenden kann.
jetzt möchte ich aber das auch der div.spacer einblenden der genau nach dem ersten div.tabhead2 konstrukt kommt.
der spacer soll hier die folgenden weiter nach unten schieben.
weiß jemand wie ich immer genau das div.spacer anspreche welches direkt nach dem div.tabhead2 kommt bei dem der mouseover zum einsatz kahm?
| Code: |
<div class="tabhead2">
<div class="tabimg2"><img src="" alt="" /></div>
<div class="bigimg"><img src="" alt="" /></div>
<div class="tabinfo2">
<span>
<strong><em>blabla</em></strong>
Lorem ipsum ...
</span>
<div class="holder">
<div class="link"><a href="#">Link</a></div>
<div class="price"><strong><%Call preiserechnen (fun)%></strong></div>
</div>
</div>
<br style="clear:both;" />
</div>
<div class="spacer"> </div>
<div class="tabhead2">
<div class="tabimg2"><img src="" alt="" /></div>
<div class="bigimg"><img src="" alt="" /></div>
<div class="tabinfo2">
<span>
<strong><em>blabla</em></strong>
Lorem ipsum ...
</span>
<div class="holder">
<div class="link"><a href="#">Link</a></div>
<div class="price"><strong><%Call preiserechnen (fun)%></strong></div>
</div>
</div>
<br style="clear:both;" />
</div>
<div class="spacer"> </div>
|
ich hoffe es ist verständlich ausgedrückt.
danke für eure Hilfe
// LÖSUNG falls es mal gebraucht wird
| Code: |
$(document).ready(function() {
$(".tabimg2").mouseover(function(){
$(this).next(".bigimg").fadeIn("slow").css("display","block");
$(".tabhead2").mouseover(function(){
$(this).next(".spacer").css("display","block");
});
});
$(".tabimg2").mouseout(function(){
$(this).next(".bigimg").fadeOut("slow");
$(".tabhead2").mouseout(function(){
$(this).next(".spacer").css("display","none");
});
});
});
|
Zuletzt bearbeitet von Kash am Fr 28.11.2008 12:22, insgesamt 2-mal bearbeitet
|
|
| |
  |
 |
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 28.11.2008 12:32
Titel
|
|
|
und die lösung in einfach:
| Code: |
$(".tabimg2").mouseover(function(){
$(this).next(".bigimg").fadeIn("slow").css("display","block");
$(".tabhead2").next(".spacer").fadeIn("slow").css("display","block");
});
|
 
|
|
| |
 |
|
|
Anzeige
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 28.11.2008 12:38
Titel
|
|
|
die nehme ich auch.danke papst.meine spinnt irgendwie rum.
gerade mit dem chef angeschaut und es ging.dann noch was verändert und ging nicht mehr.
naja bei mir war der return schuld.
bei deiner lösung wie schon gedacht, macht er alle .spacer auf. und nicht nur den direkt folgenden
//@pixelpapst:
weißt du warum ich mir eigentlich den Stress gebe diesen Spacer anzuzeigen um die anderen elemente nach unten zu schieben?weil er das bild welches in '.bigimg' sitzt im IE unter den folgenden '.tabhead2' schiebt. im FF und Opera ist es darüber zu sehen.evtl habe ich ja den fehler schon im CSS.
ich poste es sicherheitshalber mal
CSS Produktcontainer
| Code: |
div.tabhead2 {
position:relative;
display:block;
width:566px;
background:#F4F4F4;
border:1px solid #cccccc;
padding:3px;
font-size:9pt;
margin-top:10px;
}
div.tabhead2 .tabimg2 {
float:left;
}
div.tabhead2 .tabinfo2 {
float:left;
margin-left:5px;
padding-top:5px;
width:320px;
}
div.tabhead2 .tabinfo2 .holder {
width:320px;
position:absolute;
bottom:0px;
left:245px;
}
div.tabhead2 .tabinfo2 .holder .price {
float:right;
}
div.tabhead2 .tabinfo2 .holder .link {
float:left;
margin-top:13px;
margin-left:5px;
}
div.tabhead2 .bigimg {
position:absolute;
z-index:100;
top:3px;
left:244px;
width:430px;
height:323px;
display:none;
}
.spacer {
display:none;
height:150px;
}
|
Zuletzt bearbeitet von Kash am Fr 28.11.2008 12:53, insgesamt 2-mal bearbeitet
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 28.11.2008 13:47
Titel
|
|
|
|
haste auch mal n onlinebeispiel? komm gerade von draußen und brauche eh noch, bis die augen, finger und füße aufgetaut sind
|
|
| |
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 28.11.2008 13:49
Titel
|
|
|
nee, sagte es schon einem anderen user.
ist eine extranetanwendung.
(bissel zu heikel....  )
//rauch nicht soviel
Zuletzt bearbeitet von Kash am Fr 28.11.2008 13:49, insgesamt 1-mal bearbeitet
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Fr 28.11.2008 13:56
Titel
|
|
|
| Kash hat geschrieben: | nee, sagte es schon einem anderen user.
ist eine extranetanwendung.
(bissel zu heikel.... )
//rauch nicht soviel |
feigling!!!
kannste mit anderen bildern und aufs nötigste begrenzt dennoch woander hochladen... 
tze, hab nicht geraucht... war glühwein trinken!!! 
|
|
| |
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 28.11.2008 14:11
Titel
|
|
|
ich hab jetzt erstmal noch ne menge bildbearbeitung vor mir.
mich interessiert die andere lösung auch und sobald ich luft habe mache ich ein bsp.
das zeug muß heut abend fertig sein, deswegen kann ich leider nicht nebenher ein bsp aufbauen.
//mmhhhh....wein
Zuletzt bearbeitet von Kash am Fr 28.11.2008 14:12, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[jQuery] - Kindelemente ansprechen
einzelenen link mit jquery ansprechen
jQuery Link in Liste ansprechen
Web Application - Elemente Jquery
[jQuery] - Elemente automatisch anzeigen
jQuery bei .clone() entstehen unerwünschte Elemente
|
|
Willkommen auf dem Portal für Mediengestalter
