Question

我正在尝试将不透明度效果（从0到1）添加到此处某处发布的代码（由users / 1022305 / trevor）。还没有结果（我还是jquery初学者）。

以下是代码作者的小提琴：http://jsfiddle.net/trevordowdle/S7n2b/

有什么建议应该实现什么代码行？它可能是一行，如：

opacity:'toggle'

试过这个，不会工作......

更新代码：

// JavaScript Document

$(document).ready(function(){
var stop = true;
var hovered;
var timeout;


    $('.nav').hover(
        function(){
            clearTimeout(timeout);
            stop = true;
            hovered = this;
            timeout = setTimeout(function(){
            if($(hovered).hasClass('nav_menu_link_drop')){
                $('.content').css('z-index',0);
                $(hovered).next('.content').css('z-index',5);        
                $(hovered).next('.content').slideDown({

                    duration: 400, 
                    easing: 'jswing', 
                    });
                timeout = setTimeout(function(){
                    $('.content').not($(hovered).next('.content')).slideUp({
                    duration: 200, 
                    easing: 'easeInSine', 
                    });
                },100);

                $(hovered).next('.content').fadeIn(100);
            }
            else
                $('.content').slideUp(350);    
            },400);
        },
        function(e){
            stop = false;
            clearTimeout(timeout);
            setTimeout(function(){
                if(!stop)
                    $('.content').slideUp(350);
                    $('.content').fadeOut(350);
            },500);
        }
    );

    $('.content').hover(
        function(){
            stop = true;    
        },
        function(){

        }
    );

    $('#nav_menu').hover(
        function(){

        },
        function(){
            timeout = setTimeout(function(){
                $('.content').slideUp(350);
            },200);
        }
    );
});

所以我添加了这两行代码：

$(hovered).next('.content').fadeIn(100);

和

$('.content').fadeOut(350);

它不起作用:(

Answer 1

以与示例小提琴相同的方式更改不透明度的代码是：

$( "yourdivname" ).fadeIn();

和

$( "yourdivname" ).fadeOut();

但是如果没有一些代码显示到目前为止您尝试了什么，我无法解释您将如何使用它为了您的个人情况

Answer 2

请参阅此示例：

http://jsfiddle.net/S7n2b/84/

我已经为每个li提供了id

<li id="d0"><a class="nav_menu_link nav">Home</a></li>
<li class="nav_menu_link_drop nav" id="d1">
    <a class="nav_menu_link">DropDown 1</a>
</li>

$('#d1').hover(
function(){
    $('#content1').fadeIn();
     $('#content2').fadeOut();
}

）;

$('#d0').hover(
function(){
    $('#content1').fadeOut();
     $('#content2').fadeOut();
}

）;

$('#d2').hover(
function(){
    $('#content1').fadeOut();
    $('#content2').fadeIn();
}

）;

$('#nav_menu').hover(
 function(){

},function(){
    $('#content1').fadeOut();
     $('#content2').fadeOut();
}

）;

为jquery幻灯片动画添加不透明度效果

2 个答案: