JS преливане на цветове

[NumseR]

Здравейте !

Как мога да направя два цвята плавно да се преливат в даден div :roll:

Ето какво съм направил аз, но не работи

<div class="box-cont">
<a href="#"><div class="item-list-addbox">
<p>Add to cart</p>
</div></a>

<a href="#"><div class="item-list-addbox">
<p>View</p>
</div></a>
</div>

[css]
.item-list-addbox {width: 80px; height: 30px; background-color: #353a3e; margin: 5px 0 0 20px; display: inline-block;}
.item-list-addbox p {text-align: center; font-size: 14px; color: #fff; padding-top: 5px; line-height: 2;}
.item-list-addbox:hover {background-color: #05b3f2;}
[/css]

[js] $(document).ready(function(){
$(".item-list-addbox").mouseover(function() {
$(this).animate({ backgroundColor:'#05b3f2'},2000);
}).mouseout(function() {
$(this).animate({ backgroundColor:'#353a3e'},2000);
});
});[/js]

 

[LuBaTa]

Мисля, че това ще ти помогне: http://www.colorzilla.com/gradient-editor/

 

[NumseR]

Не ми трябва gradient. Искам при hover цвета на div-а да се прелива /сменя/ с друг

 

[syneidesys]

Виж тука първото демо-:
http://desizntech.info/2009/06/playing-with-jquery-color-plugin-and-color-animation/

 

[NumseR]

Да, точно това ми трябва. Направих всичко както е описано, но все още не иска да работи :shock:

Ето го новия код


[js]<script type="text/javascript">
$(".item-list-addbox a").hover(function() {
$(this).animate({ backgroundColor: "#05b3f2" }, 600);
},function() {
$(this).animate({ backgroundColor: "#353a3e" }, 400);
});
</script>[/js]

 

[syneidesys]

А jquery color плъгина изтегли ли го?

 

[NumseR]

Да и го сложих в html-а

 

[syneidesys]

Не знам какво сглобяваш но ако се затрудняваш да проследиш кое на какво ти влияе -най добре изтегли сорс кода и го използвай като основа за твоя проект!
По добре да остане нещо излишно по файловете ,стига да не пречи -отколкото да се получава обърквация!


Май трябва да махнеш това "а" след итем лист адбокс което ти е останало от кода на демото!

 

[NumseR]

И това не е, но успях да постигна нужния ефект чрез transition в CSS.
Проблема обаче е, че по-старите версии на IE не го поддържат.

Ако все пак някой се сети какъв може да е проблема с js скрипта да казва

 

[syneidesys]

Я сложи преди ховер -бокс конт а-във началото на скрипта
И документ реади гледам си го махнал от втория вариант

 

[NumseR]

Всякак ги местих, не иска да работи и това е :shock:
Вече започвам да мисля, че може би се получават конфликти между js скриптовете в документа и ако не е това просто няма какво да е.

 

[syneidesys]

Възможно е -и не само джава скрипта!
Иначе демото си работи !
Затова си прегледай структурата-кое какво наследява и така нататъка!
Или дай целия код да го види на някой! :roll:

 

[anonimen]

Ето:В архива са всички файлове. .
Беше дпстатъчно да си изтеглиш стрницата и да я "поотрежеш" малко.