Question

一个手风琴式的显示/隐藏导航系统，用于显示内容并隐藏它的五个元素。五个元素中的每一个都在渐变上淡化为不同的颜色。

如果元素是活动元素，则需要阻止onmouseout颜色返回动画，例如如果它的子div是可见的。

您可以在此处查看示例： http://dinosaurus.com.au/clients/theparrot/包含所有脚本的链接。

总结：活动元素应该删除onmouseout效果，以便活动颜色保持不变并且不会返回其原始状态。

淡入淡出的基础在于使用David Walsh的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');
    }
  });
});

如果活动，jquery会使颜色保持不变

0 个答案: