JQuery Diapositive

Question

Cela devrait être assez simple à faire dans JQuery. Je peux l'obtenir pour travailler partiellement mais pas complètement.

Tout ce que je dois avoir est une image dans un <div> avec une autre image qui couvre partiellement la partie inférieure. Lorsque je souris sur l'image ou l'image en la recouvrant partiellement, l'image partiellement couverte glisse complètement pour couvrir la première image et cette image supérieure est un lien vers une autre page etc. Lorsque je souris, la diapositive est inversée à sa position d'origine .

Des idées là-dessus, je pensais à utiliser les méthodes slide() et toggle() peut-être?

Merci

Jamie

Answer 1

vous pouvez utiliser hover() pour cette

$(object).hover(
    function() 
    { 
     $(this).slideUp(); 
    }, 
    function() 
    { 
     $(this).slideDown(); 
    } 
); 

Answer 2

Je crois toggle() se fixe des fonctions à click événements, non mouseover événements, de sorte que vous ne voudriez pas que. Dans jQueryUI, on dirait que cela correspond à la facture, mais vous pouvez simplement utiliser animate dans le noyau jQuery (jQueryUI est un très gros téléchargement supplémentaire).

Answer 3

J'ai créé un exemple sur jsbin.com qui pourrait vous aider. Vous pouvez voir la source pour voir comment cela fonctionne ou vous pouvez cliquer sur le lien en haut à droite pour modifier la source.

http://jsbin.com/ibero4/3

Answer 4

Merci pour tous les types d'aide. J'ai finalement utilisé le code suivant adapté d'un tutoriel sur nettuts.com:

HTML: 

    <li><span><img src="<1st.jpg" alt="about us" /></span><a href="about-us"><img src="1st.gif" class="move" alt="about us" /></a></li> 
<li><span><img src="<2nd.jpg" alt="about us" /></span><a href="about-us"><img src="2nd.gif" class="move" alt="about us" /></a></li> 
<li><span><img src="<3rd.jpg" alt="about us" /></span><a href="about-us"><img src="3rd.gif" class="move" alt="about us" /></a></li> 
<li><span><img src="<4th.jpg" alt="about us" /></span><a href="about-us"><img src="4th.gif" class="move" alt="about us" /></a></li> 

    CSS: 

ul#slidenav { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: left; 
    font-size: 1.1em; 
} 
ul#slidenav li{ 
    margin: 0; 
    padding: 0; 
    overflow: hidden; /*--Important - Masking out the hover state by default--*/ 
    float: left; 
    height:190px; 

    display:inline-block; 
} 



#slidenav-container { 
    margin-top: 40px; 
} 



ul#slidenav a, ul#slidenav span { 
    padding: 0px; 
    float: left; 
    text-decoration: none; 
    clear: both; 
    width: 100%; 
    height: 131px; 
    background-color:transparent; 


} 

jQuery: 




    jQuery("#slidenav li").hover(function() { //On hover... 
        jQuery(this).find(".move").stop().animate({ 
         marginTop: "-131" //Find the <img> tag and move it up 131 pixels 
        }, 250); 
       } , function() { //On hover out... 
        jQuery(this).find(".move").stop().animate({ 
         marginTop: "0" //Move the <img> back to its original state (0px) 
        }, 250); 
       });