2013-06-16 4 views
0

Je suis tombé sur l'exemple ci-dessous pour modifier dynamiquement la forme et la taille d'un objet.Contenu dynamique utilisant jquery

Ce n'est pas un exemple réel, mais une fois que je reçois ce droit, je vais l'appliquer

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
<script> 
${"div").css("position","relative"); 
</script> 
<script> 
$(document).ready(function(){ 
    $("div").mouseenter(function(){ 
    var div=$("div"); 
    div.animate({height:'300px',opacity:'0.4'},"slow"); 
    div.animate({width:'300px',opacity:'0.8'},"slow"); 
    div.animate({height:'100px',opacity:'0.4'},"slow"); 
    div.animate({width:'100px',opacity:'0.8'},"slow"); 
    }); 
}); 
</script> 
</head> 

<body> 
<button>Start Animation</button> 
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p> 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> 
</div> 

</body> 
</html> 

La balise de paragraphe dit que je dois mettre le positionnement CSS premier à créer des contenus dynamiques - comment puis-je faire cette? Est-il également possible que tous les composants soient activés pour la dynamicité lorsqu'ils sont créés?

+0

Vous ne voulez pas dire: '$ (" div "). Css (" position "," relative ");' avec un '(' not a '{'. Voici un JSFiddle avec lequel travailler: http: //jsfiddle.net/rzFzd/1/. Cela fonctionne –

+0

Oui, j'ai remarqué le type mais en changeant qui n'a pas aidé non plus ... –

+0

Je l'ai, Merci M. Polywhirl –

Répondre

0

Voici un JSFiddle avec votre animation en fonctionnement: http://jsfiddle.net/rzFzd/1.

Si jQuery ne se charge pas correctement, c'est parce que votre service Web peut être confondu avec vos balises de script.

Modifier ceci:

<script> 

à ceci:

<script rel="javascript" type="text/javascript"> 

Vous n'avez pas besoin de spécifier le type si vous utilisez un navigateur capable de HTML5.