jQuery динамическое положение фона при использовании метода .animate и плагина таймера - PullRequest
Новая
       3

jQuery динамическое положение фона при использовании метода .animate и плагина таймера

0 голосов
/ 01 ноября 2010

Всего новичков или новичков;) в jQuery, поэтому, пожалуйста, будьте терпеливы со мной ...

Я использую стандартный метод .animate вместе с плагином таймера для зацикливания анимации на двух фоновых изображениях, одно из которых является дочерним по отношению к его родителю. Эффект - это инструмент для чистки инструментов, скользящий вверх и вниз по гитарной струне, как показано на этой ссылке http://sahuspilwal.com/jquery/animate.html

Мой код jQuery & XHTML выглядит следующим образом: 

 $(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>

Однако, когда содержимое содержащего div превышает высоту фонового изображения, то есть гитары, ее координаты анимации, так сказать, не совпадают. См. Ссылку выше для анимации с контентом, который имеет динамическую высоту.

Может кто-нибудь сказать мне, как я могу установить значения DIV id = "swipe" backgroundPosition на основе динамической высоты содержащей DIV id = "гитары", чтобы анимация выравнивалась правильно независимо от высоты родительский контейнер ??? Надеюсь, что это имеет смысл ...

Заранее благодарим за любую помощь / руководство или обратную связь.

С уважением,

Сахус Пилвал

1 Ответ

0 голосов
/ 01 ноября 2010

Во время выполнения вы всегда можете получить высоту любого div через jquerys. 

.height()
.width()

Вы можете даже получить ширину и высоту фоновых изображений через атрибут attr jquery для изображения 

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

и затем, основываясь на высоте и ширине удара, вы можете установить высоту и ширину гитары следующим образом 

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

пожалуйста, дайте мне знать, если вам нужно что-нибудь еще

...