#javascript #jquery #html #css #dom
#javascript #jquery ( jquery ) #HTML #css — код #дом
Вопрос:
Я пытаюсь сделать так, чтобы span class=»term-name» был анимирован таким образом, чтобы изменить backgroundColor случайным образом из набора предопределенных цветов / hex
Вот HTML-тег.
<ul id="filter" class="group">
<li>
<a class="art-direction" href="#" title="View all items filed under Art Direction">
<span class="term-name">Art Direction</span>
<!-- START .term-count -->
<span class="term-count">4<span class="triangle-down"></span></span>
<!-- END .term-count -->
</a>
</li>
<li>
<a class="brand-strategy" href="#" title="View all items filed under Brand Strategy">
<span class="term-name">Brand Strategy</span>
<!-- START .term-count -->
<span class="term-count">2<span class="triangle-down"></span></span>
<!-- END .term-count -->
</a>
</li>
<li>
<a class="communication-2" href="#" title="View all items filed under Communication">
<span class="term-name">Communication</span>
<!-- START .term-count -->
<span class="term-count">5<span class="triangle-down"></span></span>
<!-- END .term-count -->
</a>
</li>
<li>
<a class="design-collaboration" href="#" title="View all items filed under Design Collaboration">
<span class="term-name">Design Collaboration</span>
<!-- START .term-count -->
<span class="term-count">2<span class="triangle-down"></span></span>
<!-- END .term-count -->
</a>
</li>
</ul>
И это JS-код, который я сделал, он не работает. Предполагается, что при наведении на него я добавляю случайный цвет фона к промежутку.
$( '#filter a' ).hover( function() {
//Store available css classes
var classes = new Array("green", "purple", "teal", "violet", "pink");
//Give a random class index
var randomIndex = Math.floor(Math.random()*classes.length);
$(this).find( '.term-name' ).stop().animate({ backgroundColor: 'classes[randomNumber]',}, 500, 'easeInOutExpo');
}, function() {
//return to original
$(this).find( '.term-name' ).stop().animate({ backgroundColor: 'white',}, 500, 'easeInOutExpo')";
});
Он был вдохновлен кодом JS (http://jsfiddle.net/GNgjZ/290 /)
Кстати, как вы можете заметить, ссылка состоит из 2 интервалов (term-name и term-count)
<a><span class="term-name"></span><span class="term-count"></span></a>
У term-count также есть анимация, и она работает, вот JS:
$( '.term-count' ).each( function() {
$(this).css( 'marginLeft', '-' Math.round( ($(this).outerWidth() / 2) ) 'px' );
});
$( '#filter a' ).hover( function() {
$(this).find( '.term-count' ).stop().animate({ marginBottom: '8px', opacity: 1 }, 500, 'easeInOutExpo');
}, function() {
$(this).find( '.term-count' ).stop().animate({ marginBottom: 0, opacity: 0 }, 500, 'easeInOutExpo');
});
Спасибо, надеюсь, мой JS теперь работает.
Комментарии:
1. В настоящее время у вас установлен только цвет фона при наведении курсора мыши. Вы хотите, чтобы цвет фона устанавливался без наведения курсора мыши?
2. На самом деле да. Если это означает вернуть ему исходный цвет фона после наведения курсора мыши. Но даже случайный цвет не работает.
3. Удалите одинарную кавычку значения backgroundcolor, т.е. ‘classes [randomNumber]’ должно быть classes [randomNumber], поскольку это переменная
4. По-прежнему ничего не происходит.
Ответ №1:
Эта СКРИПКА поможет вам хорошо начать. В вашем коде было несколько ошибок, таких как кавычки вокруг переменных, лишние точки с запятой и круглые скобки. Я рекомендую смотреть вашу консоль, когда вы загружаете свою страницу и тестируете свой javascript. Это говорит вам о многом. Посмотрите внимательно на скрипку и дайте мне знать, если у вас возникнут какие-либо вопросы. Надеюсь, это поможет.
var classes = ["#1ace84", "#a262c0", "#4ac0aa", "#8c78ba", "#d529cd"];
$( '#filter a' ).hover( function(e) {
//Give a random class index
var randomIndex = Math.floor(Math.random()*classes.length);
$(e.currentTarget).find( '.term-name' ).css( "backgroundColor", classes[randomIndex]);
}, function(e) {
//return to original
$(e.currentTarget).find( '.term-name' ).css( "backgroundColor", 'white');
});
Комментарии:
1. братан, у тебя есть какие-нибудь ссылки, где я могу начать изучать эти материалы? Я действительно очень хочу учиться.
2. Проверьте codeacademy.com . У них есть несколько хороших бесплатных уроков. Также необходимо прочитать «Javascript: хорошие части» Дэвида Крокфорда, чтобы научиться хорошо использовать javascript, потому что не все из них хороши. Также издательство oreilley публикует карманные путеводители. У них есть один на javascript, который даст вам хорошее представление о том, что есть во всем языке. Каждый раз, когда вы решаете использовать часть библиотеки, такой как jquery, прочитайте документацию, чтобы узнать, как правильно ее использовать. Наконец, решите, что вы хотите построить, постройте это и получайте от этого удовольствие!
Ответ №2:
Согласно Jquery API, «Все анимированные свойства должны быть анимированы до одного числового значения, за исключением случаев, указанных ниже; большинство нечисловых свойств не могут быть анимированы с использованием базовых функций jQuery (например, width, height или left могут быть анимированы, но background-color не может быть, если jQuery.Используется плагин Color()) «. Помимо этого, в вашем коде есть и другие проблемы.