Цветовое циклирование свойств некоторых элементов css с помощью jQuery:: зависание застревает и неустойчиво

Я цвет, перемещающийся по цвету, фону и цветному css-свойствам некоторых элементов с помощью jQuery и this little plugin.Цветовое циклирование свойств некоторых элементов css с помощью jQuery:: зависание застревает и неустойчиво

Я делаю это:

var currentColor = myRandNumber; // I get this variable from the main page 
var myWebColors = [ '#49aea2', '#5da270', '#a1b144', '#ceb33d', '#ce812d', 
'#c44e4e', '#ac4275', '#705f91', '#4d6791', '#5199a4' ]; 

window.setInterval(animateColor, 2000); // not using requestAnimationFrame 
              // for browser compatibility 

function animateColor() { 

    $(".new-project-header, .button a:active, 
    #logo, ul#menu-main-nav li a:active, ul#menu-main-nav li.contact a, 
    ul#menu-main-nav li.contact a:visited, .footer-twitter, 
    .footer-mail").animate(
     { 
      backgroundColor: myWebColors[currentColor] 
     }, "slow"); 

    $("a:hover, p a:hover, ul#menu-main-nav li.contact a:hover, 
    h3.portfolio-item-title a:hover").animate(
     { 
      color: myWebColors[currentColor] 
     }, "slow"); 

    $("p a, p a:visited").animate(
     { 
      borderColor: myWebColors[currentColor] 
     }, "slow"); 

    if (currentColor == 9) { // the following cycles through the array 
          // in an endless loop 
     currentColor = 0; 
    } else { 
     currentColor++; 
    } 
}

EDIT: jsfiddle HERE!

Проблема, с которой я сталкиваюсь, заключается в том, что когда я наводил верх над p a, в то время как jQuery делает цвет на велосипеде просто прекрасным, но как только я выпрямляю ссылку, она останется на своем: зависании, с последним цветом, в который она ввела.

Это еще хуже, когда я нависаю над ul#menu-main-nav li. Он изменит a: hover цвет, когда это должно применяться только к ul#menu-main-nav li.contact. Это похоже на последний селектор: состояние зависания имеет приоритет над css первого.

Возможно, я должен делать все вручную с помощью on событий? Может быть, я должен «сбросить» все состояния: не зависания в конце каждого шага цикла? Может быть, все это слишком много, и я должен попробовать другой подход?

Спасибо!

источник

2013-10-09 MrMerrick

Можете ли вы предоставить HTML или [jsFiddle] (http://jsfiddle.net)? –

Просто обновил сообщение, связав его прямо под большим кодовым полем. – MrMerrick

Aaaand обновил jsfiddle, забыл добавить фоновый цвет на велосипеде. – MrMerrick

Вам необходимо изменить состояние на значение по умолчанию, когда мышь выходит элемент. То есть зависание завершается.

JQuery hover может сделать это легко.

$("a").hover(
    function() { 
    $(this).animate({ color: myWebColors[currentColor] }, "slow"); 
    }, function() { 
     $(this).animate({ color: default_color }, "slow"); 
    } 
);

Просто из любопытства, почему бы вам не использовать CSS: парить свойство, как описано здесь http://www.w3schools.com/cssref/sel_hover.asp?

источник

2013-10-09 08:46:33 Kathy

Я использую свойство hover в моем обычном css на случай, если что-то пойдет не так/пользователь не активирует js. Но здесь я занимаюсь цветовым циклом (т. Е. Вы можете видеть изменение цвета прямо перед вами), поэтому для этого мне нужен javascript. Решение, которое вы предлагаете, относится к числу тех, которые я собираюсь использовать, но хотел бы знать, есть ли лучший/более чистый, или я должен попробовать другой подход. Благодаря! – MrMerrick

Во-первых, у вас есть петля (setInterval()), которая работает, даже если вы ничего не наводили. Это бесполезно.

Итак, я делаю обновление вашего Fiddle с помощью setTimeout(). Вы можете начать с чего-то подобного. Я также заменил :hover статусы обработчиками событий. Я не знаю, нормально ли это для вас. Но так я и должен был это сделать. Надеюсь, это поможет.

источник

2013-10-09 09:34:19 EdenSource

На самом деле, я хочу, чтобы цикл циклирования цвета всегда работал! Так что это не бесполезно, это жизненно важно :) Я просто изменяю состояние: hover, чтобы все синхронизировалось с основным циклом циклирования цвета. Тем не менее, вы второй человек, который будет делать это с событиями, поэтому я мог бы пойти по этому маршруту. – MrMerrick

Если это случайный цвет, который вы хотите, просто используйте Math.floor ((Math.random() * 11)) каждый раз, когда вы наводите ссылку, чтобы определить, какой должен быть начальный цвет. Однако, если у вас есть то, что вы ждали;) – EdenSource

Просто любопытно, действительно ли вы прочитали мой код и опубликовали? Я беру цвета из определенного массива.Проблема заключается в запутывании каскадных правил css, которые возникают из-за вмешательства в него с помощью jQuery. – MrMerrick

Цветовое циклирование свойств некоторых элементов css с помощью jQuery:: зависание застревает и неустойчиво

ответ

Смежные вопросы