Как оживить текст

Question

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

Код ниже обновляет цену правильно, и есть анимированная панель цветов, которая выводится из выпадающего списка в div. Но это просто цветовой бар. Я хотел бы, чтобы новая цена сама плавала между ними. Или, в идеале, иметь некоторое изображение, плавающее между ними. Может ли кто-нибудь увидеть способ сделать это, или если я беру неправильный подход в первую очередь?

Я использую анимационный javascript, который можно найти здесь: https://github.com/EmilStenstrom/jQuery-animate_from_to.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<script src="javascript/jquery.animate_from_to-1.0.js"></script> 

<div class="contentContainer"> 
    <form name="prices" action="" method="post" id="prices"> 
     <div class="showprice"></div> 

     <div>Slide:</div> 
     <div> 
      <select name="id[11]" class="pullDown" id="attrdrop0"> 
       <option class="pink" value="31`">No</option> 
       <option class="pink" value="32">Yes (+$40.00)</option> 
      </select> 
     </div> 

     <div>Ready:</div> 
     <div> 
      <select name="id[10]" class="pullDown" id="attrdrop1"> 
       <option class="pink" value="31">No</option> 
       <option class="pink" value="32">Yes (+$150.00)</option> 
      </select> 
     </div> 

    </form> 
</div> 

<script> 
    $(function() { 
     $("#prices").change(function() { 
      CalculatePrice(); 
     }); 
    }); 

    function CalculatePrice() { 
     var main_price = '$50'; 
     main_price = Number(main_price.replace(/[^0-9\.-]+/g, "")); 
     var cur_price = 0; 
     var ttl_price = 0; 

     $(":input.select, :input").each(function() { 
      cur_price = $('option:selected', $(this)).text(); 
      cur_price = Number(cur_price.replace(/[^0-9\.-]+/g, "")); 
      ttl_price += cur_price; 
     }); 

     ttl_price = main_price + ttl_price; 
     SetPrice(ttl_price); 
    } 

    function SetPrice(ttl_price) { 
     $("#attrdrop1").animate_from_to('div.showprice', { 
      pixels_per_second: 100, 
      initial_css: { 
       'background': 'yellow', 
       'color': 'red', 
      } 
     }); 
     $('div.showprice').text("$" + ttl_price); 
    } 
</script> 

Answer 1

jquery.animate_from_to не может поместить содержимое внутри подвижных блоков, но это может быть изображение. Посмотрите на опции на https://github.com/EmilStenstrom/jQuery-animate_from_to#options.

Код модуля (https://github.com/EmilStenstrom/jQuery-animate_from_to/blob/master/jquery.animate_from_to-1.0.js) не такой большой и открытый, что вы можете настроить для себя.