Auf Thema antworten 2026

Beitrag

<blockquote data-quote="CrazyPlaya" data-source="post: 2452656" data-attributes="member: 198395"><p>Hallo zusammen,</p><p></p><p>ich möchte gerne innerhalb einer unsortierten Liste einen Blinds Effekt erzeugen der wenn mit der Maus über das Bild innerhalb eines Listenelements nach oben verschwindet und ein Text des displayed:none im gleichen Listenelement dargestellt wird und beim Verlassen der Mouse wieder der ursprüngliche Zustand hergestellt wird.</p><p></p><p>Hier mal mein Versuch:</p><p>[html]&lt;div class=&quot;blindsgallery first-row&quot;&gt;</p><p>&lt;ul&gt;</p><p>&lt;li&gt;</p><p>&lt;div class=&quot;source&quot;&gt;&lt;img src=&quot;images/joomla_black.gif&quot; alt=&quot;&quot; /&gt; &lt;/div&gt;</p><p>&lt;div class=&quot;target&quot;&gt;test 1&lt;/div&gt;</p><p>&lt;/li&gt;</p><p>&lt;li&gt;</p><p>&lt;div class=&quot;source&quot;&gt;&lt;img src=&quot;images/joomla_black.gif&quot; alt=&quot;&quot; /&gt; &lt;/div&gt;</p><p>&lt;div class=&quot;target&quot;&gt;test 2&lt;/div&gt;</p><p>&lt;/li&gt;</p><p>&lt;li&gt;</p><p>&lt;div class=&quot;source&quot;&gt;&lt;img src=&quot;images/joomla_black.gif&quot; alt=&quot;&quot; /&gt; &lt;/div&gt;</p><p>&lt;div class=&quot;target&quot;&gt;test 3&lt;/div&gt;</p><p>&lt;/li&gt;</p><p>&lt;/ul&gt;</p><p>&lt;/div&gt;</p><p>&lt;div class=&quot;clear&quot;&gt; &lt;/div&gt;</p><p>&lt;div class=&quot;blindsgallery second-row&quot;&gt; </p><p>&lt;ul&gt;</p><p>&lt;li&gt;</p><p>&lt;div class=&quot;source&quot;&gt;&lt;img src=&quot;images/joomla_black.gif&quot; alt=&quot;&quot; /&gt;&nbsp; &lt;span class=&quot;target&quot;&gt;test 4&lt;/span&gt;&lt;/div&gt;</p><p>&lt;/li&gt;</p><p>&lt;li&gt;</p><p>&lt;div class=&quot;source&quot;&gt;&lt;img src=&quot;images/joomla_black.gif&quot; alt=&quot;&quot; /&gt; </p><p>&lt;div class=&quot;target&quot;&gt;test 5&lt;/div&gt;</p><p>&lt;/div&gt;</p><p>&lt;/li&gt;</p><p>&lt;li&gt;</p><p>&lt;div class=&quot;source&quot;&gt;&lt;img src=&quot;images/joomla_black.gif&quot; alt=&quot;&quot; /&gt; </p><p>&lt;div class=&quot;target&quot;&gt;test 6&lt;/div&gt;</p><p>&lt;/div&gt;</p><p>&lt;/li&gt;</p><p>&lt;/ul&gt;</p><p>&lt;/div&gt;[/html]</p><p></p><p>und das dazugehörige jQuery </p><p>[code=JavaScript]jQuery(document).ready(function() {</p><p>&nbsp; &nbsp; jQuery(&#039;.blindsgallery li&#039;).hover(</p><p>&nbsp; &nbsp; &nbsp; &nbsp; function() {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery(this).children(&#039;.source&#039;).slideToggle(1000);</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery(this).children(&#039;.target&#039;).show();</p><p>&nbsp; &nbsp; &nbsp; &nbsp; });</p><p>});[/code]</p><p></p><p>Wenn ich das so nutzen möchte dann klappt das nur bedingt. Wenn ich länger mit der Maus draufbleibe passiert der Effekt zufällig auf einem der anderen Elemente und der Text wird nicht angezeigt.</p><p></p><p>Hat jemand sowas schon mal gemacht, oder eine Idee wie man das richtig macht?</p><p>Ich weiß leider auch keinen&nbsp; Namen für diesen Effekt, da der richtige Blind Effekt doch etwas anders </p><p>ist.</p><p>Danke im voraus für eure Mühe.</p><p></p><p>Gruß</p><p>Karsten</p></blockquote><p></p>

[QUOTE="CrazyPlaya, post: 2452656, member: 198395"] Hallo zusammen, ich möchte gerne innerhalb einer unsortierten Liste einen Blinds Effekt erzeugen der wenn mit der Maus über das Bild innerhalb eines Listenelements nach oben verschwindet und ein Text des displayed:none im gleichen Listenelement dargestellt wird und beim Verlassen der Mouse wieder der ursprüngliche Zustand hergestellt wird. Hier mal mein Versuch: [html]<div class="blindsgallery first-row"> <ul> <li> <div class="source"><img src="images/joomla_black.gif" alt="" /> </div> <div class="target">test 1</div> </li> <li> <div class="source"><img src="images/joomla_black.gif" alt="" /> </div> <div class="target">test 2</div> </li> <li> <div class="source"><img src="images/joomla_black.gif" alt="" /> </div> <div class="target">test 3</div> </li> </ul> </div> <div class="clear"> </div> <div class="blindsgallery second-row"> <ul> <li> <div class="source"><img src="images/joomla_black.gif" alt="" /> <span class="target">test 4</span></div> </li> <li> <div class="source"><img src="images/joomla_black.gif" alt="" /> <div class="target">test 5</div> </div> </li> <li> <div class="source"><img src="images/joomla_black.gif" alt="" /> <div class="target">test 6</div> </div> </li> </ul> </div>[/html] und das dazugehörige jQuery [code=JavaScript]jQuery(document).ready(function() { jQuery('.blindsgallery li').hover( function() { jQuery(this).children('.source').slideToggle(1000); jQuery(this).children('.target').show(); }); });[/code] Wenn ich das so nutzen möchte dann klappt das nur bedingt. Wenn ich länger mit der Maus draufbleibe passiert der Effekt zufällig auf einem der anderen Elemente und der Text wird nicht angezeigt. Hat jemand sowas schon mal gemacht, oder eine Idee wie man das richtig macht? Ich weiß leider auch keinen Namen für diesen Effekt, da der richtige Blind Effekt doch etwas anders ist. Danke im voraus für eure Mühe. Gruß Karsten [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?