1

我在 Javascript 和 JQuery 方面的经验为零，但我在本文档中都使用过。

第一个是为 IE 提供 CSS3 过渡的支持，取自CSS3 Hover Transition。使用的代码是

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.hoverTransition.js"></script>

第二个用于幻灯片库，取自幻灯片库，代码为

<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.galleriffic.js"></script>
<script type="text/javascript" src="scripts/jquery.opacityrollover.js"></script>

可以看出，前 CSS3 过渡链接到 jquery 1.6.1，而后来的幻灯片库链接到 jquery 1.3.2。我必须参考这两个文件吗？

我尝试删除一个链接和另一个链接，但是如果删除了其中一个链接，CSS3 Hover Transitions 和 Slideshow Glaeery 都不起作用。此外，如果我将上述内容放在我的 head 元素中，它们将不起作用。它们只有在我将它们放在页脚之后和正文元素之前的底部时才有效。

以下是我的头标签。（用于幻灯片库）

<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>

以下是底部。（用于幻灯片库）

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            $('div.content').css('display', 'block');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
            });

            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
                delay:                     5500,
                numThumbs:                 15,
                preloadAhead:              10,
                enableTopPager:            true,
                enableBottomPager:         true,
                maxPagesToShow:            7,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play',
                pauseLinkText:             'Pause',
                prevLinkText:              'Previous',
                nextLinkText:              'Next',
                nextPageLinkText:          'Next &rsaquo;',
                prevPageLinkText:          '&lsaquo; Prev',
                enableHistory:             false,
                autoStart:                 true,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.fadeTo('fast', 0.0, callback);
                },
                onPageTransitionIn:        function() {
                    this.fadeTo('fast', 1.0);
                }
            });
        });
    </script>
4

1 回答 1

2

将两个不同版本的 jQuery 放在同一个页面中是复杂且不可取的。您的第一个目标是完全避免这种情况——您宁愿在页面中只使用较新版本的 jQuery。

因此，您的首要任务是对您正在使用的 jQuery 插件进行一些研究，看看它们是否都适用于通用版本的 jQuery。

如果您确定它们都可以使用通用版本的 jQuery，那么只需将 jQuery 包含在您的页面中的插件之前，并将插件包含在使用它们的代码之前。jQuery 代码可以放在 HEAD 部分或 BODY 部分，只要它位于任何尝试使用它的东西之前。插件代码可能在 jQuery 代码之后的任何地方，但您必须查阅插件文档以确保。

如果您确定必须拥有两个不同版本的 jQuery，那么您需要弄清楚如何去做。这是一个有关如何完成的相关问题：我可以在同一页面上使用多个版本的 jQuery 吗？.

当使用 jQuery 的两个版本时，您最终必须使用jQuery.noConflict()(notjQuery和 not $) 定义一个表示特定 jQuery 版本的唯一符号，然后使用该插件的所有代码都必须使用该唯一符号。

于 2012-08-26T23:58:52.553 回答