jQuery position de fond dynamique lors de l'utilisation et la méthode .animate plugin timer

Question

Total débutant ou Noob;) jQuery donc s'il vous plaît être patient avec moi ...

J'utilise la méthode standard .animate avec le plugin minuterie pour boucler une animation sur deux images de fond, l'une étant l'enfant de son parent. L'effet est une pièce d'équipement de nettoyage d'instruments glisser vers le haut et vers le bas une corde de guitare comme indiqué sur ce lien http://sahuspilwal.com/jquery/animate.html

Mon code jQuery & XHTML est comme suit:

$(function(){ 

    $('#swipe').css({backgroundPosition: '433px 100%'}); 

    $('#swipe').everyTime(10, function(){ 
     $('#swipe').animate({backgroundPosition:"(433px 42%)"}, 2000, 'swing'); 
     $('#swipe').animate({backgroundPosition:"(433px 100%)"}, 2000, 'swing'); 
    }); 
}); 

<div id="wrapper"> 
    <div id="guitar"> 
     <div id="swipe"></div> 
    </div> 
</div> 

Toutefois, lorsque le contenu du contenant div dépasse la hauteur de l'image de fond, c'est-à-dire que les coordonnées de la guitare de l'animation ne sont pas alignées pour ainsi dire. Voir le lien ci-dessus pour l'animation avec un contenu qui a une hauteur dynamique. Quelqu'un peut-il me dire comment je pourrais définir les valeurs de DIV id = "swipe" backgroundPosition en fonction de la hauteur dynamique du DIV id = "guitar" contenant de sorte que l'animation soit correctement alignée quelle que soit la hauteur de le conteneur parent ??? Espérons que cela a du sens ...

Merci d'avance pour toute aide/conseils ou commentaires.

Cordialement,

Sahus Pilwal

Answer 1

Lors de l'exécution vous pouvez toujours obtenir la hauteur de tout div par jquerys.

.height() 
.width() 

vous pouvez même obtenir les images d'arrière-plan largeur et la hauteur par attr attribut de jquery pour l'image

$('#imageid').attr('width'); 
$('#imageid').attr('height'); 

puis en fonction de la hauteur et la largeur swipe vous pouvez régler la hauteur et la largeur de la guitare comme suit

$('#guitar').css('width',calculated width); 
$('guitar').css('height',calculated height) 

s'il vous plaît laissez-moi savoir si vous avez besoin d'autre chose