jquery - jQuery：切换和淡入？

Question

我有以下工作正常的切换，天知道我是如何让它工作的；不明白这一切。

jQuery(function() {
    jQuery('.toggle1').click(function() {
        jQuery('.toggle-box').slideToggle('fast');
        return false;
    });
});​

是否有可能在.toggle-box打开盒子后淡入淡出？

我尝试添加..

jQuery(".toggle-box").fadeIn(2000);

但没有运气。

有可能吗？

非常感谢您的帮助。

Answer 1

这里有一些最佳实践可以帮助你，但一般来说，只要有任何容器（我称之为 .toggle-boxInner）fadeIn() 就像这样

此外，您的代码可能会发生一些清理工作，只是一些捷径

$(function(){ // when ready...

    // here's your onClick listener for the toggle1 class element(s)
    $('.toggle1').click(function(){ 

        // slideToggle the toggle-box
        $('.toggle-box').slideToggle('fast', function(){ 

            // this is called when the toggle-box slideToggle is complete
            $('.toggle-box .toggle-boxInner').fadeToggle('fast'); 
        });
        return false; // i don't think you should need this unless you're using
                      //    a <a/> or <input type='submit' /> 
                      //    as the .toggle1 element
    });
});

您可能想要 .fadeToggle 内部容器，以便在切换框滑回时它会消失。另外，请随意将 .fadeIn('slow') 更改为 'fast'。

希望这可以帮助！

编辑：进行了这些建议的更改：P

Answer 2

$(function() {
    $('.toggle-box').hide().contents().hide();
    $('.toggle1').on('click', function(e) {
        e.preventDefault();
        $('.toggle-box').slideToggle('fast', function(e) {
            if ($(this).is(':visible')) {
                $(this).contents().fadeIn(2000);
            }else{
                $(this).contents().hide();
            }
        });
    }); 
});

小提琴