Hvordan animerer jeg dette billede/div

Er ikke sikker på om jeg har forstået det korrekt, men vil tro du skal skrive noget i den her stil

 $(function() {
              $('.IndeximgOpa').each(function() {
                  $(this).hover(
                      function() {
                         elm = $(this);
                         elm.stop().animate({ opacity: 1.0 }, 500, function(){
                             elm.find('.info_div').slideUp();
                          });
                      },
                     function() {
                         elm = $(this);
                         elm.stop().animate({ opacity: 0.70 }, 500, function(){
                             elm.find('.info_div').slideDown();
                         });
                     })
                  });
          });

Hej Kenneth,

Tak for svaret!

Det ser jo meget logisk ud når du skriver det :-)

Jeg har lige indsat det og billedet bliver helt fint animeret ifht opacity. Men div boksen med class="info_div" bliver umiddelbart lige under billedet, uden at hoppe med på animationen.

Jeg har lavet flg. CSS til den div der gerne skulle slide op fra bunden af billedet:

 .info_div {width:198px; height:75px; background-color:#CCC;}

Skal den være hidden, og så kaldes frem af JQuery?

Men det ser ellers ud som om at du har forstået hvad jeg gerne vil opnå :-)

"info_div", blev bare ikke påvirket af det - Kan du se hvad der kan være galt/mangler?

ah kom lige til at se din klasse IndeximgOpa er på billedet, så du skal lige have en parent på ind i functionen.

 $(function() {
         $('.IndeximgOpa').each(function() {
           $(this).hover(
           function() {
             elm = $(this);
             elm.stop().animate({ opacity: 1.0 }, 500, function(){
               elm.parent().find('.info_div').slideUp();
             });
           },
           function() {
             elm = $(this);
             elm.stop().animate({ opacity: 0.70 }, 500, function(){
               elm.parent().find('.info_div').slideDown();
             });
           })
         });
       });

Nårh nu kan jeg se at det nok er mig der har forstået det forkert, mht. slide.

Jeg troede faktisk at det ville lave animationen, sådan at hvis man forestiller sig at på mouseOver, så starter animationen nede fra bunden af billedet og, slider op OVER/OVENPÅ billedet.

Kan det lade sig gøre med JQuery, ved at ændre på noget af funktionen.

Fordi som det er nu, så er den div (info_div) på MouseOver ikke at se, den slider "tilbage til ingenting" (dvs. lige under billedet.) og det er helt fint, da den kun skal vises ved MouseOver.

På MouseOut så slider den ned, og kan ses UNDER billedet.

Det jeg gerne ville var at den som udgangspunkt er det samme sted som nu, lige under billedet og ikke synlig. Men så på MouseOver, slide op OVER billedet så man kan se den tekst der skal beskrive lidt om produktet og som er inde i "inf_div".

Jeg beklager hvis jeg har beskrevet det forkert!

Skal info_div animeres til den specifikke størrelse, og så slides op over billedet?

Ja jeg er lidt en novice, men håber at finde svaret :-)

Kan det laves med næsten samme funktion, så "info_div" slider op over billedet, og billedet IKKE bevæger sig, men ligger bag ved "info_div"?

Ah ja okay, så kan du animere på show/hide

 $(function() {
         $('.IndeximgOpa').each(function() {
           $(this).hover(
           function() {
             elm = $(this);
             elm.stop().animate({ opacity: 1.0 }, 500, function(){
               elm.parent().find('.info_div').show("slide", { direction: "down" }, 500);
             });
           },
           function() {
             elm = $(this);
             elm.stop().animate({ opacity: 0.70 }, 500, function(){
               elm.parent().find('.info_div').hide("slide", { direction: "down" }, 500);
             });
           })
         });
       });

Nu ved jeg ikke hvad du har af css på din div's men hvis det ikke virker kan du evt prøve med noget ala

 .index_top_left_img{
   position: relative;
 }
 .info_div{
   position: absolute;
   z-index: 2;
   bottom: 0px;
   display: none;
 }

Sååå nu må det være tæt på!

Den er det helt rigtige sted nu, hvis jeg fjerner display:none; kan jeg se det.

Sætter jeg display til none, kommer den dog ikke frem ved mouseOver.

Jeg har indsat CSS som foreslået og har flg HTML:

 <div id="index_top_left">
     <div class="index_top_left_img">
         <img src="products/wrangler-jeans.gif" width="198" class="IndeximgOpa" />
     <div class="info_div">TEST...</div>
 </div>

CSS:

 #index_top_left {width:628px; height:308px; float:left; border:1px dashed #CCC; background-color:#F3F3E4; padding-left:10px; padding-top:8px;}
 .index_top_left_img {width:198px; height:248px; background-color:#F3F3E4; float:left; margin-right:9px; border:1px solid #CCC; position: relative;}
 .info_div {width:198px; height:75px; background-color:red;  position: absolute; z-index: 2; bottom: 0px; display: none;}

Med dette js:

 $(function() {
          $('.IndeximgOpa').each(function() {
            $(this).hover(
            function() {
              elm = $(this);
              elm.stop().animate({ opacity: 1.0 }, 500, function(){
                elm.parent().find('.info_div').show("slide", { direction: "down" }, 500);
              });
            },
            function() {
              elm = $(this);
              elm.stop().animate({ opacity: 0.70 }, 500, function(){
                elm.parent().find('.info_div').hide("slide", { direction: "down" }, 500);
              });
            })
          });
        });

Så stadig er opacity animationen helt fin, men info_div holder sig langt væk fra det hele.

Men det jeg har er med ovenstående.

Hvis du har mere tid og tålmodighed, sætter jeg stor pris på din hjælp! Det gør jeg selvfølgelig også alligevel :-)

jeg har prøvet at rette det lidt til, der er dog en lille bug (i firefox), men er for træt til at finde den lige nu. hvis du holder musen der hvor diven kommer frem, køre den en fin lille løkke, op og ned til man flytter musen, pga noget med focus kunne jeg forstille mig.

well har smidt det online det jeg prøvet, og virker fint nok (bortset fra den der lille bug)

http://kenneth.wi.ots.dk/udvikleren/jquery/1/

Jeg sætter stor pris på assistancen!

Det er lige præcist det du har lavet sidst som jeg havde i tankerne! - Perfekt :-)

Nu er det bare sådan at efter jeg satte det ind, så sker der slet ikke noget, og med samme kode.. Så det giver jo ikke meget mening.

Jeg stopper også for i dag, men smider det jeg har op i morgen, og så må det sidste da kunne laves! Kan jo se at der virker, så nu er det bare mig der åbenbart ikke kan kopiere det korrekt.

Mange tak for hjælpen so far!

hvis du kan smide et link til det du har lavet, gør det lidt nemmer at finde fejlen

kan anbefale firebug hvis du bruger firefox, gør det noget nemmer at finde fejl i javascrip (og andet for den sags skyld)

EDIT:

Hej igen,

Jeg har samlet det hele her, og faktisk så virker det, NÆSTEN:

Det er kun på det sidste billede ud af de tre, hvor div boksen "info_div slider op over billedet.

Uanset hvilket billede man hover over, så slider "info_div" op over det sidste billede (...skjorte.gif).

 <!DOCTYPE HTML>
 <html>
 <head>
 
 <style type="text/css">
 
 .IndeximgOpa {opacity:0.7; filter:alpha(opacity=70);}
 
 .info_div {width:198px; height:75px; background-color:#333; opacity:0.95; filter:alpha(opacity=95);  position:absolute; bottom:0px; display:none;}
 
 .index_top_left_img {width:198px; height:248px; background-color:#F3F3E4; float:left; margin-right:9px; border:1px solid #CCC; position: relative;}
 
 #index_top_left {width:628px; height:308px; float:left; border:1px dashed #CCC; background-color:#F3F3E4; padding-left:10px; padding-top:8px;}
 
 </style>
 
 <meta charset="utf-8">
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
 
 <script type="text/javascript">
       $(function() {
         $('.index_top_left_img').each(function() {
           elm = $(this);
           $(this).mouseenter(
           function() {
             elm.find(".IndeximgOpa").animate({ opacity: 1.0 }, 500, function(){
               elm.find('.info_div').show("slide", { direction: "down" }, 500);
             });
           }).mouseleave(
           function() {
             elm.find(".IndeximgOpa").animate({ opacity: 0.70 }, 500, function(){
               elm.find('.info_div').hide("slide", { direction: "down" }, 500);
             });
           })
         });
       });
 </script>
 
 <title>JQuery slide on top of image - animation</title>
 
 </head>
 
 <body>
 
 <div id="index_top_left">
 <!-- De næste 3 div bokse er dem der skal animeres - dvs dem der er hedder: "index_top_left_img" -->
 
 <div class="index_top_left_img">
    <img src="img/wrangler-jeans.gif" width="198" class="IndeximgOpa" />
        <div class="info_div">Produkt information til jeans...</div>
 </div>
  
               
 <div class="index_top_left_img">
     <img src="img/vanucci-jakke.gif" width="198" class="IndeximgOpa" />
         <div class="info_div">Produkt information til jakke...</div>
 </div>  
               
 <div class="index_top_left_img">
     <img src="img/wrangler-skjorte.gif" width="198" class="IndeximgOpa" />
         <div class="info_div">Produkt information til skjorte...</div>
 </div>
 <!-- Herefter er der ikke mere der skal animeres -->
 
 <!-- 
 Yderligere div bokse der er inde i wrapperen: "index_top_left": men ikke  har noget at gøre med animationen.
 -->
 <div class="index_top_left_img_beskrivelse">          
   <p class="index_vare_beskrivelse">
   <!--<a href="/voksen-vanucci-skjorter-med-lange-aermer-summer-breeze"><b>Se varen her!</b>
   </a>-->          
   </p>
 </div>
 
 <div class="index_top_left_img_beskrivelse">
  <!-- <p class="index_vare_beskrivelse">
   <a href="/voksen-vanucci-skjorter-med-lange-aermer-summer-breeze"><b>Se varen her!</b>
   </a>-->
   </p>
 </div>
 
 <div class="index_top_left_img_beskrivelse">
   <p class="index_vare_beskrivelse">
   <!--<a href="/voksen-vanucci-skjorter-med-lange-aermer-summer-breeze"><b>Se varen her!</b>
   </a>-->
   </p>
 </div>
 
 
 </div> <!-- SLUT på wrapper: "index_top_left" - DIV -->
 
 </body>
 </html>

NY EDIT NY EDIT:
------------------------------------------------
Jeg luskede mig til noget viden inde fra JQUERY forum, og der var en der påpegede at denne linie:

elm = $(this);

Skulle være:

var elm = $(this);

I starten af funktionen - da den ellers ville være global og kun indeholde den sidste værdi i each loopen.

Så hvis der skulle være nogen der har lyst til at bruge dette så virker det med ovenstående kode :-)

Tak for hjælpen herinde fra!!