плагин цвета jQuery - PullRequest
Новая
       25

плагин цвета jQuery

0 голосов
/ 16 февраля 2011

Я очень новичок в jQuery. Я создал небольшой скрипт для анимации цветного фона DIV и границы цвета другого DIV в цикле. Я использовал плагин цвета jquery, и скрипт работает! (Unbelievable)

Проблема в том, что мой скрипт очень медленный, и у меня проблема с загрузкой страницы (особенно с IE) Это скрипт: 

<script type="text/javascript">
$(document).ready(function() {                   
      spectrum();
      function spectrum(){
      $('#rt-main').animate( { backgroundColor: "#aeff00" }, 5000);
      $('#rt-main').animate( { backgroundColor: "#ff6c00" }, 5000);
      $('#rt-main').animate( { backgroundColor: "#0086b6" }, 5000);
      $('#rt-main').animate( { backgroundColor: "#00a4a8" }, 5000);
      $('#rt-main').animate( { backgroundColor: "#d43795" }, 5000);
      $('#rt-main').animate( { backgroundColor: "#ffd200" }, 5000);
      $('#rt-header').animate( { borderTopColor: "#aeff00" }, 5000);
      $('#rt-header').animate( { borderTopColor: "#ff6c00" }, 5000);
      $('#rt-header').animate( { borderTopColor: "#0086b6" }, 5000);
      $('#rt-header').animate( { borderTopColor: "#00a4a8" }, 5000);
      $('#rt-header').animate( { borderTopColor: "#d43795" }, 5000);
      $('#rt-header').animate( { borderTopColor: "#ffd200" }, 5000);
      spectrum();
    }

  });   
</script>

Я уверен, что есть лучший способ сделать то же самое. Здесь вы можете увидеть демо. (Не работает в IE)

1 Ответ

1 голос
/ 16 февраля 2011

Основная проблема в том, что ваше время установлено на 5 секунд, и вы меняете фон для тех же 2 элементов (в этой демонстрации) 5 раз, прежде чем они даже сделали анимацию один раз.

Чего вы пытаетесь достичь?

Редактировать:

Попробуйте это: 

var i = 0;
var colorArray = ["#aeff00", "#ff6c00", "#0086b6", "#00a4a8", "#d43795", "#ffd200"];

function changeColor(element,element2,color)
{
    $(element).animate( 
    { 
        backgroundColor: color 
    }, 5000, function(){
        if(i<=colorArray.length)
        {
            i++;
        }
        else
        {
            i=0;
        }
        changeColor(element,element2,colorArray[i]);
    });

    $(element2).animate( 
    { 
        borderTopColor: color 
    }, 5000});


}

changeColor('#rt-main', '#rt-header', colorArray[i]);
...