Question

点击一个标签后，有人能告诉我如何包含fadeIn效果吗？我和FadeIN一起玩了但是无法让它发挥作用。非常感谢任何帮助！

非常感谢你！

enter code here

<script>
        // Wait until the DOM has loaded before querying the document
        $(document).ready(function(){
            $('ul.tabs').each(function(){


enter code here

        // For each set of tabs, we want to keep track of
                // which tab is active and it's associated content
                var $active, $content, $links = $(this).find('a');

                // If the location.hash matches one of the links,     use that as the active tab.
                // If no match is found, use the first link as the initial active tab.
                $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
                $active.addClass('active').fadeIn(200);
                $content = $($active.attr('href'));

                // Hide the remaining content
                $links.not($active).each(function () {
                    $($(this).attr('href')).hide();
                });

                // Bind the click event handler
                $(this).on('click', 'a', function(e){
                    // Make the old tab inactive.
                    $active.removeClass('active');
                    $content.hide();

                    // Update the variables with the new link and content
                    $active = $(this);
                    $content = $($(this).attr('href'));

                    // Make the tab active.
                    $active.addClass('active');
                    $content.show();

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });
            });
        });

Answer 1

只要$ content指的是有效对象，只需在适当的位置添加淡出。

            // Bind the click event handler
            $(this).on('click', 'a', function(e){

                // Prevent the anchor's default click action
                e.preventDefault();

                // Make the old tab inactive.
                $active.removeClass('active');
                $content.fadeOut(500);
                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.addClass('active');
                $content.fadeIn(500);

            });

我将preventDefault移到了顶部，因为它可能是最好的初始onClick操作。

将fadIng效果添加到JQuery选项卡

1 个答案: