jquery animation & CSS Position

J'essaye de fixer la position css dans l'effet d'animation jquery dans le code ci-dessous.jquery animation & CSS Position

mon span vert et orange est hors de contrôle sur le survol de la souris.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<style> 
.box1{ 
     width:40px; 
     height:13px; 
     float:left; 
     font-size:.6em; color:#fff; background:#99CC00; 
     font-family:Arial, Helvetica, sans-serif; 
    } 
.box2{ 
     width:40px; 
     height:auto; 
     float:left; 
     font-size:.6em; color:#fff; background:#FF6600; 
     font-family:Arial, Helvetica, sans-serif; 
     margin-top:1px; 
     opacity:.8; 
     filter: alpha(opacity=75); 
    } 
</style> 
<script> 
$(function() { 
      $('span').hover(function() { 

        $(this).stop().css({ 'z-index': '999999', 'position': 'absolute', 'float': 'left'}).animate({ marginTop: '0px', marginLeft: '0px', top: '0', left: '0', width: '200px', height: '125px', padding: '0px' }, 700, 'swing'); 


       }, function() { 

        $(this).stop().css({ 'z-index': '0', 'border': '0px' }).fadeIn('slow').animate({ marginTop: '0px', marginLeft: '0px', top: '0', left: '0', width: '40px', height: '13px', padding: '0px' }, 700, 'swing'); 


       }); 
      }); 

</script> 


</head> 

<body> 
<table width="160" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="40" height="40" valign="top" bgcolor="#e4e4e4"> 
     <span class="box1">Hello ji</span> 
     <span class="box2">Sanket</span> </td> 
    <td width="40" height="40" valign="top" bgcolor="#CCCCCC">&nbsp;</td> 
    <td width="40" height="40" valign="top" bgcolor="#999999">&nbsp;</td> 
    <td width="40" height="40" valign="top" bgcolor="#666666">&nbsp;</td> 
    </tr> 
</table> 
</body> 
</html>

Nouveau à jquery, aide très appréciée.

Source

2011-05-25 Sanket

Pour votre information - Fournir un exemple de travail du code de problème va ** beaucoup * * plus loin que l'envoi de code lorsque vous êtes demander de l'aide. Si votre page Web n'est pas publique, utilisez un outil comme jsfiddle.net pour publier les parties pertinentes du code. J'ai fait un violon (http://jsfiddle.net/sqCN5/1/) pour vous cette fois. :) – Dutchie432

Vous devez décrire le look final! La question est un peu floue. –

@ Dutchie432 - Bien dutchie. Oui en effet. J'adore faire des JSfiddles aussi, mais c'est bon pour SO et son avenir de coller des codes sur les lieux. Ou un jour ... si elles ferment JSFiddle .... SO restera ** VIDE! **;)) –

Retirez

top: '0', left: '0',

à la fois la fonction animate paramêtres

et enlever

, 'position': 'absolute'

de la première fonction css paramteres

Ajouter:

position:absolute;

à .box1 et .box2 classes css.

Ajouter

z-index:10;

à .box1 classe

css

Ajouter

top: 25px;  
z-index:0;

à .box2 classe

css

Situé sur .box2

margin-top:0px;

pour éviter les secousses.

Est-ce ce que vous voulez?

Check this out:

http://jsfiddle.net/M9JkP/4/

Source

2011-05-25 12:42:23

Enlever (en haut: '0', gauche: '0',) fonctionne bien mais en second lieu sur place et se cacher en premier :(vérifier dans le navigateur – Sanket

Je ne sais pas si je comprends bien, mais si vous le faites comme ci-dessous, les éléments span DonT changer la position

$(function() { 
      $('span').hover(function() { 

        $(this).stop().css({ 'float': 'left'}).animate({ marginTop: '0px', marginLeft: '0px', width: '200px', height: '125px', padding: '0px' }, 700, 'swing'); 


       }, function() { 

        $(this).stop().css({ 'border': '0px' }).fadeIn('slow').animate({ marginTop: '0px', marginLeft: '0px', width: '40px', height: '13px', padding: '0px' }, 700, 'swing'); 


       }); 
      });

Source

2011-05-25 12:44:20 Zeus

+ 1 EXCELLENTE! On dirait que vous lisez les esprits!; D comme comme –

Enlever (en haut: '0', à gauche: '0',) fonctionne bien mais en second sur place et se cacher d'abord :(vérifier dans le navigateur – Sanket

I supprimé la «position»: «absolue», et il semble mieux:

http://jsfiddle.net/gy7t9/

Source

2011-05-25 12:47:06

vous faites bien, mais

ne doit pas être secoué, ces verts et couche orange devrait superposer sur la table – Sanket

Voilà ce qui se passe quand ne pas préciser vos besoins avec précision. –

J'ai joué un petit peu avec ça et j'ai obtenu ce que je pense être le bon résultat en fonction de ce que vous essayez de faire. J'ai également fait une fonction expandMenu() et collapseMenu() jQuery pour faciliter l'expansion/l'effondrement en utilisant $(this).expandMenu();. Pour la démonstration, j'ai également ajouté l'appel collapseMenu() à la liaison click() de sorte que lorsqu'un élément dépensé est cliqué, il s'effondre.

Exemple de travail:http://jsfiddle.net/sqCN5/4/

Mise à jour CSS

span{ 
    position: absolute;  
} 
.box1{ 
    width:40px; 
    height:13px; 
    float:left; 
    font-size:.6em; 
    color:#fff; 
    background:#99CC00; 
    font-family:Arial, Helvetica, sans-serif; 
} 
.box2{ 
    top:25px; 
    width:40px; 
    height:auto; 
    font-size:.6em; 
    color:#fff; 
    background:#FF6600; 
    font-family:Arial, Helvetica, sans-serif; 
    margin-top:1px; 
    opacity:.8; 
    filter: alpha(opacity=75); 
}

Mise à jour JS

$('span').hover(function() { 
    $(this).expandMenu(); 
}, function() { 
    $(this).collapseMenu(); 
}).click(function(){ 
    $(this).collapseMenu(); 
}); 

$.fn.collapseMenu= function() { 
    $(this) 
     .stop() 
     .css({ 
      'border': '0px' 
     }) 
     .fadeIn('slow') 
     .animate({ 
      width: '40px', 
      height: '13px', 
      padding: '0px' 
     }, 700,'swing', function(){ 
      $(this).css({'z-index': '0'}); 
     }); 
    return ($(this));  
}; 

$.fn.expandMenu= function() { 
    $(this) 
     .stop() 
     .css({ 
      'z-index': '999999', 
      'border' : '1px solid #000' 
     }) 
     .animate({ 
      width: '200px', 
      height: '125px', 
      padding: '0px' 
     }, 700, 'swing'); 
    return ($(this));  
};

Source

2011-05-25 12:58:16 Dutchie432

Questions connexes

jquery animation & CSS Position

Répondre

Questions connexes