Question

需要帮助确定如何在以下内容中添加淡出/ ：

$(function(){               
    $('#menu').stop(true, true).hover(function(){   
            $('.content').stop(true, true).delay(300).show(
                "clip",
                {direction: "vertical"}, 
                200       
            );                          
        },
        function(){ 
            $('.content').stop(true, true).hide( 
                "clip",
                {direction: "vertical"}, 
                200 
            );
        }); 
});

当动画clip出现在show / hide上时，我希望它与clip同时淡入/淡出，但是如果我添加.animate或{{ 1}}。

（使用 jQuery 和 jQuery UI ）

Example jsFiddle

有什么想法吗？

Answer 1

您可以使用.animate()代替.fadeIn() / .fadeOut()，可以传递一个选项（queue : false），可以让动画一次运行，而不是放置它在队列中。

基于您的代码的示例（默认情况下将opacity设置为零）：

$('.content')
    .stop(true, true)
    .show( "clip",{direction: "vertical"}, 800 )
    .animate({ opacity : 1 }, { duration: 800, queue: false });

jsFiddle Demo

使用淡入淡出显示/隐藏剪辑效果

1 个答案: