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();
            }
        });
    }); 
});

FIDDLE

jQuery：Toggle＆amp;淡入？

2 个答案: