JQuery сделать этот цвет, если он активен - PullRequest
Новая
       36

JQuery сделать этот цвет, если он активен

1 голос
/ 15 февраля 2012

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

Необходимо запретить анимацию возврата цвета onmouseout, если элемент является активным элементом, например, если его дочерний элемент div видим.

Пример можно посмотреть здесь: http://dinosaurus.com.au/clients/theparrot/ со ссылкамико всем сценариям.

В итоге: у активного элемента должен быть удален эффект onmouseout, чтобы активный цвет оставался и НЕ возвращался в исходное состояние.

Основы затухания здесьиспользуя функцию dwFadingLinks Дэвида Уолша: 

jQuery.fn.dwFadingLinks = function(settings) {
settings = jQuery.extend({
    color: '#ff8c00',
    duration: 500
}, settings);
    return this.each(function() {
        var original = $(this).css('color');
        $(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
        $(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
    });
};

$(document).ready(function() {
$('#blue').dwFadingLinks({
    color: '#36F',
    duration: 500
});
$('#orange').dwFadingLinks({
    color: '#F90',
    duration: 500
});
$('#pink').dwFadingLinks({
    color: '#F09',
    duration: 500
});
$('#dkblue').dwFadingLinks({
    color: '#06C',
    duration: 500
});
$('#green').dwFadingLinks({
    color: '#093',
    duration: 500
});
 });

Скрипт show / hide не использует jquery Accordion, скорее этот скрипт: 

$(document).ready(function() {
  $('div.demo-show h3').add('div.demo-show2 h3').hover(function() {
    $(this).addClass('hover');
  }, function() {
    $(this).removeClass('hover');
  });
  $('div.demo-show h3').click(function() {
    $(this).addClass('active');
  }, function() {
    $(this).removeClass('active');
  });
});

$(document).ready(function() {
  $('div.demo-show> div').hide();  
  $('div.demo-show> h3').click(function() {
    $('div.demo-show> h3').removeClass('active');
    $('div.demo-show> h3').removeClass('hover');
    $(this).addClass('active');
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast');
      });
    } else {
       $nextDiv.slideToggle('fast');
    }
  });
});
...